feat(gerrit): add some basic theming
This is based on some of the preliminary colour work done by @ckie in the the-distro/floral.systems repo.
This commit is contained in:
parent
06dd4d6e85
commit
6a8f49f180
|
@ -141,7 +141,9 @@ in
|
||||||
plugins = with pkgs.gerritPlugins; [
|
plugins = with pkgs.gerritPlugins; [
|
||||||
oauth
|
oauth
|
||||||
metrics-reporter-prometheus
|
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" {
|
(pkgs.runCommand "checks.js" {
|
||||||
BASE_URI = builtins.toJSON "https://buildbot.forkos.org";
|
BASE_URI = builtins.toJSON "https://buildbot.forkos.org";
|
||||||
SUPPORTED_PROJECTS = builtins.toJSON [
|
SUPPORTED_PROJECTS = builtins.toJSON [
|
||||||
|
|
69
services/gerrit/theme.js
Normal file
69
services/gerrit/theme.js
Normal file
|
@ -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];
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue