From a1a8a149ca1b434586a9e8bfec84985ed1fcc2b3 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Tue, 28 Apr 2026 16:03:10 -0400
Subject: [PATCH] feat(themes): add octo gitea theme with light, dark, and auto
 variants

- add theme-octo-dark.css with deep black background and blue accent
- add theme-octo-light.css with white background and blue accent
- add theme-octo-auto.css that switches between light/dark via prefers-color-scheme
- update README with installation instructions, variant descriptions, and customization notes
---
 README.md                   |  43 ++++-
 themes/theme-octo-auto.css  |   7 +
 themes/theme-octo-dark.css  | 317 ++++++++++++++++++++++++++++++++++++
 themes/theme-octo-light.css | 293 +++++++++++++++++++++++++++++++++
 4 files changed, 659 insertions(+), 1 deletion(-)
 create mode 100644 themes/theme-octo-auto.css
 create mode 100644 themes/theme-octo-dark.css
 create mode 100644 themes/theme-octo-light.css

diff --git a/README.md b/README.md
index 4764b29..5304aa1 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,43 @@
-# octo-gitea
+# Octo Gitea
 
+Thème Gitea épuré, palette neutre, disponible en variante claire et sombre.
+
+## Variantes
+
+| Thème | Style |
+|-------|-------|
+| **Octo Dark** | Fond noir profond (`#020202` / `#000000`), texte clair, accent bleu |
+| **Octo Light** | Fond blanc, texte sombre, accent bleu |
+| **Octo Auto** | Bascule automatique selon `prefers-color-scheme` du système |
+
+## Installation
+
+1. Copie les trois fichiers de [`themes/`](themes/) dans `data/gitea/public/assets/css/` :
+
+   ```sh
+   cp themes/theme-octo-*.css /chemin/vers/gitea/data/public/assets/css/
+   ```
+
+   Le dossier `assets/css` peut ne pas exister par défaut, crée-le si besoin.
+
+2. Édite `data/gitea/conf/app.ini` et ajoute les variantes à la ligne `THEMES` de la section `[ui]` :
+
+   ```ini
+   [ui]
+   THEMES = gitea-auto, gitea-light, gitea-dark, octo-auto, octo-light, octo-dark
+   ```
+
+   Les noms à ajouter sont **sans** le préfixe `theme-` ni le suffixe `.css`.
+
+3. Redémarre Gitea.
+
+4. Choisis le thème dans **Paramètres → Apparence**.
+
+> [!IMPORTANT]
+> Le thème `octo-auto` nécessite la présence de `theme-octo-light.css` **et** `theme-octo-dark.css` dans le même dossier — il les `@import` selon le `prefers-color-scheme` du navigateur.
+
+Doc Gitea de référence : [Customizing Gitea](https://docs.gitea.com/administration/customizing-gitea#customizing-the-look-of-gitea).
+
+## Personnalisation
+
+Les couleurs sont définies via les variables CSS standard de Gitea (`--color-primary`, `--color-body`, `--color-syntax-*`, etc.). Pour ajuster un thème, édite directement le fichier CSS correspondant — aucun build n'est nécessaire.
diff --git a/themes/theme-octo-auto.css b/themes/theme-octo-auto.css
new file mode 100644
index 0000000..9ceaa95
--- /dev/null
+++ b/themes/theme-octo-auto.css
@@ -0,0 +1,7 @@
+@import "./theme-octo-light.css" (prefers-color-scheme: light);
+@import "./theme-octo-dark.css" (prefers-color-scheme: dark);
+
+gitea-theme-meta-info {
+  --theme-display-name: "Octo Auto";
+  --theme-color-scheme: "auto";
+}
diff --git a/themes/theme-octo-dark.css b/themes/theme-octo-dark.css
new file mode 100644
index 0000000..43a82db
--- /dev/null
+++ b/themes/theme-octo-dark.css
@@ -0,0 +1,317 @@
+gitea-theme-meta-info {
+  --theme-display-name: "Octo Dark";
+  --theme-color-scheme: "dark";
+}
+
+:root {
+  --is-dark-theme: true;
+  --color-primary: #1f6feb;
+  --color-primary-contrast: #ffffff;
+  --color-primary-dark-1: #4084ee;
+  --color-primary-dark-2: #6299f1;
+  --color-primary-dark-3: #84aef4;
+  --color-primary-dark-4: #a5c3f7;
+  --color-primary-dark-5: #c7d8fa;
+  --color-primary-dark-6: #e9edfd;
+  --color-primary-dark-7: #fcfcfe;
+  --color-primary-light-1: #1c64d3;
+  --color-primary-light-2: #1958ba;
+  --color-primary-light-3: #154ca1;
+  --color-primary-light-4: #114088;
+  --color-primary-light-5: #0e3470;
+  --color-primary-light-6: #0a2657;
+  --color-primary-light-7: #06183e;
+  --color-primary-alpha-10: #1f6feb19;
+  --color-primary-alpha-20: #1f6feb33;
+  --color-primary-alpha-30: #1f6feb4b;
+  --color-primary-alpha-40: #1f6feb66;
+  --color-primary-alpha-50: #1f6feb80;
+  --color-primary-alpha-60: #1f6feb99;
+  --color-primary-alpha-70: #1f6febb3;
+  --color-primary-alpha-80: #1f6febcc;
+  --color-primary-alpha-90: #1f6febe1;
+  --color-primary-hover: var(--color-primary-light-1);
+  --color-primary-active: var(--color-primary-light-2);
+  --color-secondary: #30363d;
+  --color-secondary-dark-1: #3d444d;
+  --color-secondary-dark-2: #484f58;
+  --color-secondary-dark-3: #586069;
+  --color-secondary-dark-4: #6e7681;
+  --color-secondary-dark-5: #8b949e;
+  --color-secondary-dark-6: #959da6;
+  --color-secondary-dark-7: #adbac7;
+  --color-secondary-dark-8: #b1bac4;
+  --color-secondary-dark-9: #c9d1d9;
+  --color-secondary-dark-10: #d1d9e0;
+  --color-secondary-dark-11: #e6edf3;
+  --color-secondary-dark-12: #f0f6fc;
+  --color-secondary-dark-13: #ffffff;
+  --color-secondary-light-1: #21262d;
+  --color-secondary-light-2: #16191d;
+  --color-secondary-light-3: #0d0f12;
+  --color-secondary-light-4: #070809;
+  --color-secondary-alpha-10: #30363d19;
+  --color-secondary-alpha-20: #30363d33;
+  --color-secondary-alpha-30: #30363d4b;
+  --color-secondary-alpha-40: #30363d66;
+  --color-secondary-alpha-50: #30363d80;
+  --color-secondary-alpha-60: #30363d99;
+  --color-secondary-alpha-70: #30363db3;
+  --color-secondary-alpha-80: #30363dcc;
+  --color-secondary-alpha-90: #30363de1;
+  --color-secondary-button: var(--color-secondary-dark-4);
+  --color-secondary-hover: var(--color-secondary-dark-3);
+  --color-secondary-active: var(--color-secondary-dark-2);
+  /* console colors - used for actions console and console files */
+  --color-console-fg: #c9d1d9;
+  --color-console-fg-subtle: #8b949e;
+  --color-console-bg: #09090a;
+  --color-console-border: #21262d;
+  --color-console-hover-bg: #131416;
+  --color-console-active-bg: #21262d;
+  --color-console-menu-bg: #131416;
+  --color-console-menu-border: #30363d;
+  --color-console-link: #58a6ff;
+  /* named colors */
+  --color-red: #f85149;
+  --color-orange: #f78166;
+  --color-yellow: #e3b341;
+  --color-olive: #a2a626;
+  --color-green: #3fb950;
+  --color-teal: #1cb0ab;
+  --color-blue: #58a6ff;
+  --color-violet: #bc8cff;
+  --color-purple: #d2a8ff;
+  --color-pink: #db61a2;
+  --color-brown: #b69a6d;
+  --color-black: #010409;
+  /* light variants - produced via Sass scale-color(color, $lightness: +10%) */
+  --color-red-light: #ff6c64;
+  --color-orange-light: #ff957a;
+  --color-yellow-light: #ecbf5b;
+  --color-olive-light: #b5b937;
+  --color-green-light: #5ec96b;
+  --color-teal-light: #2cc4be;
+  --color-blue-light: #79b8ff;
+  --color-violet-light: #c89fff;
+  --color-purple-light: #dab9ff;
+  --color-pink-light: #e479b3;
+  --color-brown-light: #c4ad84;
+  --color-black-light: #1f242d;
+  /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-dark-1: #df4942;
+  --color-orange-dark-1: #df745c;
+  --color-yellow-dark-1: #cca13b;
+  --color-olive-dark-1: #929622;
+  --color-green-dark-1: #39a748;
+  --color-teal-dark-1: #199e9a;
+  --color-blue-dark-1: #4f95e5;
+  --color-violet-dark-1: #a87ee5;
+  --color-purple-dark-1: #bd97e5;
+  --color-pink-dark-1: #c55792;
+  --color-brown-dark-1: #a48b62;
+  --color-black-dark-1: #010308;
+  /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+  --color-red-dark-2: #c6413a;
+  --color-orange-dark-2: #c66752;
+  --color-yellow-dark-2: #b58f34;
+  --color-olive-dark-2: #82851e;
+  --color-green-dark-2: #339440;
+  --color-teal-dark-2: #168d89;
+  --color-blue-dark-2: #4685cc;
+  --color-violet-dark-2: #9670cc;
+  --color-purple-dark-2: #a886cc;
+  --color-pink-dark-2: #af4e82;
+  --color-brown-dark-2: #927b57;
+  --color-black-dark-2: #010207;
+  /* ansi colors used for actions console and console files */
+  --color-ansi-black: #484f58;
+  --color-ansi-red: #ff7b72;
+  --color-ansi-green: #3fb950;
+  --color-ansi-yellow: #e3b341;
+  --color-ansi-blue: #58a6ff;
+  --color-ansi-magenta: #bc8cff;
+  --color-ansi-cyan: #39c5cf;
+  --color-ansi-white: var(--color-console-fg-subtle);
+  --color-ansi-bright-black: #6e7681;
+  --color-ansi-bright-red: #ffa198;
+  --color-ansi-bright-green: #56d364;
+  --color-ansi-bright-yellow: #f0c674;
+  --color-ansi-bright-blue: #79c0ff;
+  --color-ansi-bright-magenta: #d2a8ff;
+  --color-ansi-bright-cyan: #56d4dd;
+  --color-ansi-bright-white: var(--color-console-fg);
+  /* other colors */
+  --color-grey: #30363d;
+  --color-grey-light: #6e7681;
+  --color-gold: #e3b341;
+  --color-white: #ffffff;
+  --color-diff-added-fg: #3fb950;
+  --color-diff-added-linenum-bg: #14361d;
+  --color-diff-added-row-bg: #0f2b18;
+  --color-diff-added-row-border: #1f4a2b;
+  --color-diff-added-word-bg: #2ea04340;
+  --color-diff-moved-row-bg: #2d2906;
+  --color-diff-moved-row-border: #5c5212;
+  --color-diff-removed-fg: #f85149;
+  --color-diff-removed-linenum-bg: #3a1414;
+  --color-diff-removed-row-bg: #2c0f0f;
+  --color-diff-removed-row-border: #4a1f1f;
+  --color-diff-removed-word-bg: #f8514940;
+  --color-diff-inactive: #131416;
+  --color-error-border: #6e2424;
+  --color-error-bg: #2d0d0d;
+  --color-error-bg-active: #4a1414;
+  --color-error-bg-hover: #3a1010;
+  --color-error-text: var(--color-text);
+  --color-success-border: #1f5e2b;
+  --color-success-bg: #0d2417;
+  --color-success-text: var(--color-text);
+  --color-warning-border: #5c4316;
+  --color-warning-bg: #2d2208;
+  --color-warning-text: var(--color-text);
+  --color-info-border: #1f4a82;
+  --color-info-bg: #0c1d35;
+  --color-info-text: var(--color-text);
+  --color-red-badge: #f85149;
+  --color-red-badge-bg: #f851491a;
+  --color-red-badge-hover-bg: #f851494d;
+  --color-green-badge: #3fb950;
+  --color-green-badge-bg: #3fb9501a;
+  --color-green-badge-hover-bg: #3fb9504d;
+  --color-yellow-badge: #e3b341;
+  --color-yellow-badge-bg: #e3b3411a;
+  --color-yellow-badge-hover-bg: #e3b3414d;
+  --color-orange-badge: #f78166;
+  --color-orange-badge-bg: #f781661a;
+  --color-orange-badge-hover-bg: #f781664d;
+  --color-git: #f05133;
+  --color-logo: #58a6ff;
+  /* target-based colors */
+  --color-body: #020202;
+  --color-box-header: #000000;
+  --color-box-body: #020202;
+  --color-box-body-highlight: #09090a;
+  --color-text-dark: #e6edf3;
+  --color-text: #c9d1d9;
+  --color-text-light: #adbac7;
+  --color-text-light-1: #8b949e;
+  --color-text-light-2: #6e7681;
+  --color-text-light-3: #484f58;
+  --color-footer: var(--color-nav-bg);
+  --color-timeline: #21262d;
+  --color-input-text: var(--color-text-dark);
+  --color-input-background: #09090a;
+  --color-input-toggle-background: #21262d;
+  --color-input-border: var(--color-secondary-dark-1);
+  --color-light: #00000028;
+  --color-light-border: #e6edf328;
+  --color-hover: #e6edf319;
+  --color-hover-opaque: #131416;
+  --color-active: #e6edf324;
+  --color-menu: #131416;
+  --color-card: #131416;
+  --color-markup-table-row: #e6edf30f;
+  --color-markup-code-block: #131416;
+  --color-markup-code-inline: #e6edf328;
+  --color-button: #21262d;
+  --color-code-bg: #131416;
+  --color-shadow: #00000080;
+  --color-shadow-opaque: #000000;
+  --color-secondary-bg: #21262d;
+  --color-expand-button: #21262d;
+  --color-placeholder-text: var(--color-text-light-3);
+  --color-editor-line-highlight: var(--color-secondary-alpha-40);
+  --color-editor-selection: var(--color-primary-alpha-50);
+  --color-project-column-bg: var(--color-secondary-light-1);
+  --color-caret: var(--color-text);
+  --color-reaction-bg: #e6edf312;
+  --color-reaction-hover-bg: var(--color-primary-light-4);
+  --color-reaction-active-bg: var(--color-primary-light-5);
+  --color-tooltip-text: #e6edf3;
+  --color-tooltip-bg: #000000f0;
+  --color-nav-bg: #000000;
+  --color-nav-hover-bg: var(--color-secondary-light-1);
+  --color-nav-text: var(--color-text);
+  --color-secondary-nav-bg: #020202;
+  --color-label-text: var(--color-text);
+  --color-label-bg: #6e76814b;
+  --color-label-hover-bg: #6e7681a0;
+  --color-label-active-bg: #6e7681ff;
+  --color-accent: #f78166;
+  --color-small-accent: var(--color-primary-light-5);
+  --color-highlight-fg: #e3b341;
+  --color-highlight-bg: #443a27;
+  --color-overlay-backdrop: #000000c0;
+  --color-danger: var(--color-red);
+  --color-transparency-grid-light: #21262d;
+  --color-transparency-grid-dark: #131416;
+  --color-workflow-edge-hover: #6e7681;
+  --color-syntax-keyword: #ff7b72;
+  --color-syntax-bool: #79c0ff;
+  --color-syntax-control: #ff7b72;
+  --color-syntax-name: #d2a8ff;
+  --color-syntax-type: #d2a8ff;
+  --color-syntax-number: #79c0ff;
+  --color-syntax-operator: #ff7b72;
+  --color-syntax-regexp: #a5d6ff;
+  --color-syntax-string: #a5d6ff;
+  --color-syntax-comment: #8b949e;
+  --color-syntax-invalid: #f85149;
+  --color-syntax-link: var(--color-primary);
+  --color-syntax-tag: #7ee787;
+  --color-syntax-attribute: #79c0ff;
+  --color-syntax-property: #79c0ff;
+  --color-syntax-variable: #ffa657;
+  --color-syntax-string-special: #79c0ff;
+  --color-syntax-escape: #79c0ff;
+  --color-syntax-entity: #d2a8ff;
+  --color-syntax-preproc: #ff7b72;
+  --color-syntax-preproc-file: #a5d6ff;
+  --color-syntax-decorator: #d2a8ff;
+  --color-syntax-namespace: #ffa657;
+  --color-syntax-name-pseudo: #79c0ff;
+  --color-syntax-comment-special: #8b949e;
+  --color-syntax-text: #e6edf3;
+  --color-syntax-text-alt: #c9d1d9;
+  --color-syntax-punctuation: #e6edf3;
+  --color-syntax-whitespace: #484f58;
+  --color-syntax-diff-fg: #e6edf3;
+  --color-syntax-deleted-bg: #f8514933;
+  --color-syntax-inserted-bg: #3fb95033;
+  --color-syntax-emph: #ffa657;
+  --color-syntax-strong: #ffa657;
+  --color-syntax-heading: #79c0ff;
+  --color-syntax-subheading: #a5d6ff;
+  --color-syntax-output: #8b949e;
+  --color-syntax-prompt: #ffa657;
+  --color-syntax-traceback: #f85149;
+  --color-syntax-matching-bracket-bg: #17e5e650;
+  --color-syntax-nonmatching-bracket-bg: #f8514950;
+  accent-color: var(--color-accent);
+  color-scheme: dark;
+}
+
+/* invert emojis that are hard to read otherwise */
+.emoji[aria-label="check mark"],
+.emoji[aria-label="currency exchange"],
+.emoji[aria-label="TOP arrow"],
+.emoji[aria-label="END arrow"],
+.emoji[aria-label="ON! arrow"],
+.emoji[aria-label="SOON arrow"],
+.emoji[aria-label="heavy dollar sign"],
+.emoji[aria-label="copyright"],
+.emoji[aria-label="registered"],
+.emoji[aria-label="trade mark"],
+.emoji[aria-label="multiply"],
+.emoji[aria-label="plus"],
+.emoji[aria-label="minus"],
+.emoji[aria-label="divide"],
+.emoji[aria-label="curly loop"],
+.emoji[aria-label="double curly loop"],
+.emoji[aria-label="wavy dash"],
+.emoji[aria-label="paw prints"],
+.emoji[aria-label="musical note"],
+.emoji[aria-label="musical notes"] {
+  filter: invert(100%) hue-rotate(180deg);
+}
diff --git a/themes/theme-octo-light.css b/themes/theme-octo-light.css
new file mode 100644
index 0000000..16d2562
--- /dev/null
+++ b/themes/theme-octo-light.css
@@ -0,0 +1,293 @@
+gitea-theme-meta-info {
+  --theme-display-name: "Octo Light";
+  --theme-color-scheme: "light";
+}
+
+:root {
+  --is-dark-theme: false;
+  --color-primary: #0366d6;
+  --color-primary-contrast: #ffffff;
+  --color-primary-dark-1: #035cc1;
+  --color-primary-dark-2: #0252ac;
+  --color-primary-dark-3: #024897;
+  --color-primary-dark-4: #013e82;
+  --color-primary-dark-5: #00316a;
+  --color-primary-dark-6: #002550;
+  --color-primary-dark-7: #001838;
+  --color-primary-light-1: #1f78dc;
+  --color-primary-light-2: #4a92e3;
+  --color-primary-light-3: #6ba6e9;
+  --color-primary-light-4: #8fbcef;
+  --color-primary-light-5: #b5d2f5;
+  --color-primary-light-6: #d8e7fa;
+  --color-primary-light-7: #ecf3fc;
+  --color-primary-alpha-10: #0366d619;
+  --color-primary-alpha-20: #0366d633;
+  --color-primary-alpha-30: #0366d64b;
+  --color-primary-alpha-40: #0366d666;
+  --color-primary-alpha-50: #0366d680;
+  --color-primary-alpha-60: #0366d699;
+  --color-primary-alpha-70: #0366d6b3;
+  --color-primary-alpha-80: #0366d6cc;
+  --color-primary-alpha-90: #0366d6e1;
+  --color-primary-hover: var(--color-primary-dark-1);
+  --color-primary-active: var(--color-primary-dark-2);
+  --color-secondary: #d1d5da;
+  --color-secondary-dark-1: #c6cad0;
+  --color-secondary-dark-2: #b8bcc2;
+  --color-secondary-dark-3: #a0a4ab;
+  --color-secondary-dark-4: #8b8f96;
+  --color-secondary-dark-5: #6a737d;
+  --color-secondary-dark-6: #586069;
+  --color-secondary-dark-7: #444d56;
+  --color-secondary-dark-8: #2f363d;
+  --color-secondary-dark-9: #24292e;
+  --color-secondary-dark-10: #1b1f23;
+  --color-secondary-dark-11: #14171a;
+  --color-secondary-dark-12: #0c0e10;
+  --color-secondary-dark-13: #000000;
+  --color-secondary-light-1: #e1e4e8;
+  --color-secondary-light-2: #eaedf0;
+  --color-secondary-light-3: #f2f4f5;
+  --color-secondary-light-4: #fafbfc;
+  --color-secondary-alpha-10: #d1d5da19;
+  --color-secondary-alpha-20: #d1d5da33;
+  --color-secondary-alpha-30: #d1d5da4b;
+  --color-secondary-alpha-40: #d1d5da66;
+  --color-secondary-alpha-50: #d1d5da80;
+  --color-secondary-alpha-60: #d1d5da99;
+  --color-secondary-alpha-70: #d1d5dab3;
+  --color-secondary-alpha-80: #d1d5dacc;
+  --color-secondary-alpha-90: #d1d5dae1;
+  --color-secondary-button: var(--color-secondary-dark-4);
+  --color-secondary-hover: var(--color-secondary-dark-5);
+  --color-secondary-active: var(--color-secondary-dark-6);
+  /* console colors - used for actions console and console files */
+  --color-console-fg: #24292e;
+  --color-console-fg-subtle: #586069;
+  --color-console-bg: #fafbfc;
+  --color-console-border: #e1e4e8;
+  --color-console-hover-bg: #f2f4f5;
+  --color-console-active-bg: #e1e4e8;
+  --color-console-menu-bg: #ffffff;
+  --color-console-menu-border: #e1e4e8;
+  --color-console-link: #0366d6;
+  /* named colors */
+  --color-red: #d73a49;
+  --color-orange: #e36209;
+  --color-yellow: #9a6700;
+  --color-olive: #735c0f;
+  --color-green: #22863a;
+  --color-teal: #1b7c83;
+  --color-blue: #0366d6;
+  --color-violet: #5a32a3;
+  --color-purple: #6f42c1;
+  --color-pink: #b5258f;
+  --color-brown: #735c0f;
+  --color-black: #1b1f23;
+  /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
+  --color-red-light: #e3636e;
+  --color-orange-light: #ed8438;
+  --color-yellow-light: #c89200;
+  --color-olive-light: #a08518;
+  --color-green-light: #34ad51;
+  --color-teal-light: #25a8b3;
+  --color-blue-light: #2e87e8;
+  --color-violet-light: #7747c4;
+  --color-purple-light: #8c61cf;
+  --color-pink-light: #c84cab;
+  --color-brown-light: #a08518;
+  --color-black-light: #4b5258;
+  /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
+  --color-red-dark-1: #c12b39;
+  --color-orange-dark-1: #cb5708;
+  --color-yellow-dark-1: #845800;
+  --color-olive-dark-1: #614e0d;
+  --color-green-dark-1: #1d7331;
+  --color-teal-dark-1: #176b71;
+  --color-blue-dark-1: #035cc1;
+  --color-violet-dark-1: #4d2b8b;
+  --color-purple-dark-1: #5d3aa3;
+  --color-pink-dark-1: #99207a;
+  --color-brown-dark-1: #614e0d;
+  --color-black-dark-1: #16191e;
+  /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
+  --color-red-dark-2: #ab2632;
+  --color-orange-dark-2: #b34d07;
+  --color-yellow-dark-2: #6e4900;
+  --color-olive-dark-2: #51410b;
+  --color-green-dark-2: #18602a;
+  --color-teal-dark-2: #135a5e;
+  --color-blue-dark-2: #0252ac;
+  --color-violet-dark-2: #41267a;
+  --color-purple-dark-2: #4f308f;
+  --color-pink-dark-2: #841c69;
+  --color-brown-dark-2: #51410b;
+  --color-black-dark-2: #0c0e10;
+  /* ansi colors used for actions console and console files */
+  --color-ansi-black: #24292e;
+  --color-ansi-red: #d73a49;
+  --color-ansi-green: #28a745;
+  --color-ansi-yellow: #9a6700;
+  --color-ansi-blue: #0366d6;
+  --color-ansi-magenta: #5a32a3;
+  --color-ansi-cyan: #1b7c83;
+  --color-ansi-white: var(--color-console-fg-subtle);
+  --color-ansi-bright-black: #6a737d;
+  --color-ansi-bright-red: #cb2431;
+  --color-ansi-bright-green: #22863a;
+  --color-ansi-bright-yellow: #b08800;
+  --color-ansi-bright-blue: #005cc5;
+  --color-ansi-bright-magenta: #5a32a3;
+  --color-ansi-bright-cyan: #3192aa;
+  --color-ansi-bright-white: var(--color-console-fg);
+  /* other colors */
+  --color-grey: #6a737d;
+  --color-grey-light: #959da5;
+  --color-gold: #b08800;
+  --color-white: #ffffff;
+  --color-diff-added-fg: #22863a;
+  --color-diff-added-linenum-bg: #d1f8d9;
+  --color-diff-added-row-bg: #e6ffed;
+  --color-diff-added-row-border: #d1f8d9;
+  --color-diff-added-word-bg: #acf2bd;
+  --color-diff-moved-row-bg: #fff8c5;
+  --color-diff-moved-row-border: #eed99c;
+  --color-diff-removed-fg: #d73a49;
+  --color-diff-removed-linenum-bg: #ffcecb;
+  --color-diff-removed-row-bg: #ffeef0;
+  --color-diff-removed-row-border: #ffcecb;
+  --color-diff-removed-word-bg: #fdb8c0;
+  --color-diff-inactive: #f2f4f5;
+  --color-error-border: #d73a4966;
+  --color-error-bg: #ffeef0;
+  --color-error-bg-active: #ffcecb;
+  --color-error-bg-hover: #ffdcd7;
+  --color-error-text: var(--color-text);
+  --color-success-border: #22863a66;
+  --color-success-bg: #dafbe1;
+  --color-success-text: var(--color-text);
+  --color-warning-border: #9a670066;
+  --color-warning-bg: #fff8c5;
+  --color-warning-text: var(--color-text);
+  --color-info-border: #0366d666;
+  --color-info-bg: #ddf4ff;
+  --color-info-text: var(--color-text);
+  --color-red-badge: #d73a49;
+  --color-red-badge-bg: #d73a491a;
+  --color-red-badge-hover-bg: #d73a494d;
+  --color-green-badge: #22863a;
+  --color-green-badge-bg: #22863a1a;
+  --color-green-badge-hover-bg: #22863a4d;
+  --color-yellow-badge: #9a6700;
+  --color-yellow-badge-bg: #9a67001a;
+  --color-yellow-badge-hover-bg: #9a67004d;
+  --color-orange-badge: #e36209;
+  --color-orange-badge-bg: #e362091a;
+  --color-orange-badge-hover-bg: #e362094d;
+  --color-git: #f05133;
+  --color-logo: #0366d6;
+  /* target-based colors */
+  --color-body: #ffffff;
+  --color-box-header: #ffffff;
+  --color-box-body: #ffffff;
+  --color-box-body-highlight: #fafbfc;
+  --color-text-dark: #24292e;
+  --color-text: #444d56;
+  --color-text-light: #586069;
+  --color-text-light-1: #6a737d;
+  --color-text-light-2: #6a737d;
+  --color-text-light-3: #959da5;
+  --color-footer: var(--color-nav-bg);
+  --color-timeline: #e1e4e8;
+  --color-input-text: var(--color-text-dark);
+  --color-input-background: #ffffff;
+  --color-input-toggle-background: #e1e4e8;
+  --color-input-border: var(--color-secondary);
+  --color-light: #1b1f2306;
+  --color-light-border: #1b1f231d;
+  --color-hover: #1b1f2308;
+  --color-hover-opaque: #f2f4f5;
+  --color-active: #1b1f2314;
+  --color-menu: #fafbfc;
+  --color-card: #fafbfc;
+  --color-markup-table-row: #1b1f230a;
+  --color-markup-code-block: #f2f4f5;
+  --color-markup-code-inline: #1b1f2312;
+  --color-button: #fafbfc;
+  --color-code-bg: #f2f4f5;
+  --color-shadow: #1b1f2326;
+  --color-shadow-opaque: #c6cad0;
+  --color-secondary-bg: #f2f4f5;
+  --color-expand-button: #dbedff;
+  --color-placeholder-text: var(--color-text-light-3);
+  --color-editor-line-highlight: var(--color-secondary-alpha-30);
+  --color-editor-selection: var(--color-primary-alpha-30);
+  --color-project-column-bg: var(--color-secondary-light-3);
+  --color-caret: var(--color-text-dark);
+  --color-reaction-bg: #1b1f230a;
+  --color-reaction-hover-bg: var(--color-primary-light-5);
+  --color-reaction-active-bg: var(--color-primary-light-6);
+  --color-tooltip-text: #ffffff;
+  --color-tooltip-bg: #24292ef0;
+  --color-nav-bg: #ffffff;
+  --color-nav-hover-bg: var(--color-secondary-light-2);
+  --color-nav-text: var(--color-text);
+  --color-secondary-nav-bg: #fafbfc;
+  --color-label-text: var(--color-text);
+  --color-label-bg: #959da54b;
+  --color-label-hover-bg: #959da5a0;
+  --color-label-active-bg: #959da5ff;
+  --color-accent: #fd8c73;
+  --color-small-accent: var(--color-primary-light-6);
+  --color-highlight-fg: #735c0f;
+  --color-highlight-bg: #fff8c5;
+  --color-overlay-backdrop: #1b1f234d;
+  --color-danger: var(--color-red);
+  --color-transparency-grid-light: #fafafa;
+  --color-transparency-grid-dark: #e2e2e2;
+  --color-workflow-edge-hover: #b8bcc2;
+  --color-syntax-keyword: #d73a49;
+  --color-syntax-bool: #005cc5;
+  --color-syntax-control: #d73a49;
+  --color-syntax-name: #6f42c1;
+  --color-syntax-type: #6f42c1;
+  --color-syntax-number: #005cc5;
+  --color-syntax-operator: #d73a49;
+  --color-syntax-regexp: #032f62;
+  --color-syntax-string: #032f62;
+  --color-syntax-comment: #6a737d;
+  --color-syntax-invalid: #cb2431;
+  --color-syntax-link: var(--color-primary);
+  --color-syntax-tag: #22863a;
+  --color-syntax-attribute: #005cc5;
+  --color-syntax-property: #005cc5;
+  --color-syntax-variable: #e36209;
+  --color-syntax-string-special: #005cc5;
+  --color-syntax-escape: #005cc5;
+  --color-syntax-entity: #6f42c1;
+  --color-syntax-preproc: #d73a49;
+  --color-syntax-preproc-file: #032f62;
+  --color-syntax-decorator: #6f42c1;
+  --color-syntax-namespace: #e36209;
+  --color-syntax-name-pseudo: #005cc5;
+  --color-syntax-comment-special: #6a737d;
+  --color-syntax-text: #24292e;
+  --color-syntax-text-alt: #444d56;
+  --color-syntax-punctuation: #24292e;
+  --color-syntax-whitespace: #d1d5da;
+  --color-syntax-diff-fg: #24292e;
+  --color-syntax-deleted-bg: #ffeef0;
+  --color-syntax-inserted-bg: #e6ffed;
+  --color-syntax-emph: #e36209;
+  --color-syntax-strong: #e36209;
+  --color-syntax-heading: #005cc5;
+  --color-syntax-subheading: #032f62;
+  --color-syntax-output: #6a737d;
+  --color-syntax-prompt: #e36209;
+  --color-syntax-traceback: #cb2431;
+  --color-syntax-matching-bracket-bg: #34d05840;
+  --color-syntax-nonmatching-bracket-bg: #d73a4940;
+  accent-color: var(--color-accent);
+  color-scheme: light;
+}