infra/services/gerrit/theme.js

/* Set up theming for Floral.
 * vim: set et ts=2 sw=2:
 */
Gerrit.install((plugin) => {
  const stylesheet = new CSSStyleSheet();
  stylesheet.replace(`
    html {
      --header-title-content: 'floral.systems';

      --blue-50: #f3f4fb;
      --blue-100: #e3e6f6;
      --blue-200: #ced5ef;
      --blue-300: #acb8e4;
      --blue-400: #8495d6;
      --blue-500: #6775ca;
      --blue-600: #5158bb;
      --blue-700: #494bac;
      --blue-800: #41408d;
      --blue-900: #383870;
      --blue-950: #252546;

      --coral-50: #fff1f1;
      --coral-100: #ffe0e0;
      --coral-200: #ffc5c5;
      --coral-300: #ff9e9d;
      --coral-400: #ff6665;
      --coral-500: #fe4a49;
      --coral-600: #ec1716;
      --coral-700: #c70f0e;
      --coral-800: #a41110;
      --coral-900: #881514;
      --coral-950: #4a0505;

      --teal-50: #eefbf5;
      --teal-100: #d6f5e5;
      --teal-200: #b1e9d0;
      --teal-300: #7ed7b5;
      --teal-400: #49be95;
      --teal-500: #27a27b;
      --teal-600: #188162;
      --teal-700: #136951;
      --teal-800: #125342;
      --teal-900: #104437;
      --teal-950: #08261f;

      --zinc-50: #fafafa;
      --zinc-100: #f4f4f5;
      --zinc-200: #e4e4e7;
      --zinc-300: #d4d4d8;
      --zinc-400: #a1a1aa;
      --zinc-500: #71717a;
      --zinc-600: #52525b;
      --zinc-700: #3f3f46;
      --zinc-800: #27272a;
      --zinc-900: #18181b;
      --zinc-950: #09090b;
    }
    html.lightTheme {
      --header-background-color: var(--teal-700);
      --header-text-color: var(--coral-50);
    }
    html.darkTheme {
      --header-background-color: var(--teal-900);
      --header-text-color: var(--coral-50);
    }
  `).then(() => {
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
  });
});