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

Myzel394/README.md

Create NodeJS project

Get the wallpaper image

Combine everything

Examples