Luke Granger-Brown
6a8f49f180
This is based on some of the preliminary colour work done by @ckie in the the-distro/floral.systems repo.
69 lines
1.7 KiB
JavaScript
69 lines
1.7 KiB
JavaScript
/* 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];
|
|
});
|
|
});
|