diff --git a/services/gerrit/default.nix b/services/gerrit/default.nix index 1be0e22..8e79b04 100644 --- a/services/gerrit/default.nix +++ b/services/gerrit/default.nix @@ -141,7 +141,9 @@ in plugins = with pkgs.gerritPlugins; [ oauth metrics-reporter-prometheus - # Buildbot checks plugin (writeText because services.gerrit.plugins expects packages) + # Theme plugin + (pkgs.concatText "theme.js" [ ./theme.js ]) + # Buildbot checks plugin (pkgs.runCommand "checks.js" { BASE_URI = builtins.toJSON "https://buildbot.forkos.org"; SUPPORTED_PROJECTS = builtins.toJSON [ diff --git a/services/gerrit/theme.js b/services/gerrit/theme.js new file mode 100644 index 0000000..bbd0e86 --- /dev/null +++ b/services/gerrit/theme.js @@ -0,0 +1,69 @@ +/* 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]; + }); +});