One Dark/Light dynamic theme for Blink Shell (auto-switches with system dark/light mode)

one-dark-light.js

const darkPalette = {
  black:        "#1e2127",
  red:          "#e06c75",
  green:        "#98c379",
  yellow:       "#d19a66",
  blue:         "#61afef",
  magenta:      "#c678dd",
  cyan:         "#56b6c2",
  white:        "#abb2bf",
  lightBlack:   "#5c6370",
  lightRed:     "#e06c75",
  lightGreen:   "#98c379",
  lightYellow:  "#d19a66",
  lightBlue:    "#61afef",
  lightMagenta: "#c678dd",
  lightCyan:    "#56b6c2",
  lightWhite:   "#fffefe",
  foreground:   "#abb2bf",
  background:   "#1e2127",
  cursor:       "rgba(224, 165, 71, 0.5)",
};

const lightPalette = {
  black:        "#383a42",
  red:          "#e45649",
  green:        "#50a14f",
  yellow:       "#986801",
  blue:         "#4078f2",
  magenta:      "#a626a4",
  cyan:         "#0184bc",
  white:        "#fafafa",
  lightBlack:   "#a0a1a7",
  lightRed:     "#e45649",
  lightGreen:   "#50a14f",
  lightYellow:  "#c18401",
  lightBlue:    "#4078f2",
  lightMagenta: "#a626a4",
  lightCyan:    "#0184bc",
  lightWhite:   "#ffffff",
  foreground:   "#383a42",
  background:   "#fafafa",
  cursor:       "rgba(82, 110, 255, 0.5)",
};

const setTheme = ({ matches = false }) => {
  const p = matches ? darkPalette : lightPalette;
  t.prefs_.set("cursor-color", p.cursor);
  t.prefs_.set("cursor-blink", false);
  t.prefs_.set("foreground-color", p.foreground);
  t.prefs_.set("background-color", p.background);
  t.prefs_.set("color-palette-overrides", [
    p.black,     p.red,          p.green,      p.yellow,
    p.blue,      p.magenta,      p.cyan,       p.white,
    p.lightBlack, p.lightRed,    p.lightGreen, p.lightYellow,
    p.lightBlue, p.lightMagenta, p.lightCyan,  p.lightWhite,
  ]);
};

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", setTheme);

setTheme({
  matches: window.matchMedia("(prefers-color-scheme: dark)").matches,
});