Skip to content

Instantly share code, notes, and snippets.

@Myzel394
Last active November 7, 2023 21:40
Show Gist options
  • Save Myzel394/4d7976af3cf6f81c170138ac22e4ddb3 to your computer and use it in GitHub Desktop.
Save Myzel394/4d7976af3cf6f81c170138ac22e4ddb3 to your computer and use it in GitHub Desktop.
Automatic term colors based on background image

This gist explains how to automatically create a kitty theme .conf file based on the daily Bing wallpaper. The concept can be applied to other themes and wallpapers as well.

The files are also available on my dotfiles

Create NodeJS project

Create a NodeJS project. We will create a script that extracts the colors from an image using node-vibrant.

In that project, create a file set_theme_from_bg.js:

const path = require("path");
const fs = require("fs");
const os = require("os");
const tinyColor = require("tinycolor2");
const Vibrant = require("node-vibrant");

/***
 * @param {Palette} colors
 * @returns {string}
 */
function createTheme(colors) {
  const primary = tinyColor(colors.Muted.getHex());
  const secondary = tinyColor(colors.Vibrant.getHex());

  return {
    background: tinyColor(colors.DarkMuted.getHex()).darken(20).toHexString(),
    foreground: colors.LightMuted.getHex(),
    color2: primary.toHexString(),
    color3: primary.lighten(10).toHexString(),
    color4: secondary.darken(10).toHexString(),
    color5: secondary.darken(13).toHexString(),
    color6: secondary.toHexString(),
    color7: secondary.lighten(10).toHexString(),
    color8: secondary.darken(15).toHexString(),
    color9: primary.lighten(20).toHexString(),
    color10: primary.lighten(25).toHexString(),
    color11: secondary.lighten(15).toHexString(),
    color12: secondary.lighten(18).toHexString(),
    color13: secondary.lighten(21).toHexString(),
    color14: secondary.lighten(24).toHexString(),
    color15: secondary.lighten(30).toHexString(),
    cursor: primary,
  };
}

async function main() {
  const imagePath = process.argv[2];

  const colors = await Vibrant.from(imagePath).getPalette();

  const theme = createTheme(colors);

  const themePath = path.resolve(
    os.homedir(),
    ".config",
    "kitty",
    "bg_image_theme.conf",
  );

  fs.writeFileSync(
    themePath,
    Object.entries(theme)
      .map(([key, value]) => `${key} ${value}`)
      .join("\n"),
  );
}

main();

Get the wallpaper image

Now we want to fetch the wallpaper. I use a plugin that automatically downloads the current Bing wallpaper to ~/Pictures/BingWallpaper and saves it like this:

20231031-PumpkinsSquash_ROW7452014291_UHD.jpg
20231102-DeathValleySalt_ROW8432245186_UHD.jpg
20231104-BisonSnow_ROW8100762478_UHD.jpg
20231106-LagoPehoe_ROW8483133966_UHD.jpg
20231101-HautBarr_ROW7979436506_UHD.jpg
20231103-SeaNettles_ROW7904214322_UHD.jpg
20231105-SilencioSpain_ROW8301480487_UHD.jpg

I want to always use the most recent image:

ls "$FOLDER" | sort -k 1,1 -t"-" -n --reverse | head -n 1

Combine everything

Now you can combine everything and create a cronjob for example!

.config/scripts/create_theme_from_bg_image.sh

#!/bin/bash
FOLDER=~/Pictures/BingWallpaper
# Finds the most recent image in the folder
IMAGE=$(ls "$FOLDER" | sort -k 1,1 -t"-" -n --reverse | head -n 1)

node ~/.config/scripts/set_theme_from_bg.js "$FOLDER/$IMAGE"
@reboot bash ~/.config/scripts/create_theme_from_bg_image.sh
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment