Color Themes

RULES:

• import: import { ColorThemes } from "winnetoujs/modules/colorThemes"
• define CSS variables in :root
• call ColorThemes.applySavedTheme() before render
• switch theme via ColorThemes.newTheme({ "--var": value })
• values are strings; include -- in keys

CSS VARS:

:root {
  --primary: #3498db;
  --background: #ffffff;
  --text: #333333;
}
body {
  background: var(--background);
  color: var(--text);
}

STARTUP:

import { ColorThemes } from "winnetoujs/modules/colorThemes";

ColorThemes.applySavedTheme();
startApp();

SWITCH THEME:

ColorThemes.newTheme({
  "--primary": "#2980b9",
  "--background": "#1a1a1a",
  "--text": "#ffffff",
});

TOGGLE (simple):

const bg = getComputedStyle(document.documentElement)
  .getPropertyValue("--background")
  .trim();

const isLight = bg === "#ffffff";
ColorThemes.newTheme(
  isLight
    ? { "--background": "#1a1a1a", "--text": "#ffffff" }
    : { "--background": "#ffffff", "--text": "#333333" },
);

BEST PRACTICES:

• use semantic var names (--text, --surface)
• update all theme-dependent colors with vars
• keep contrast accessible
• use CSS transitions for smooth change

TROUBLESHOOT:

• not persisting: ensure applySavedTheme() called before render
• not applying: vars must be in :root, and CSS must use var(--x)
• partial update: remove hard-coded colors

Converted and distributed by TomeVault — claim your Tome and manage your conversions.