D4rkst3r/d4rkbot
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Gitea-Theme augenfreundlicher: Gold für Links, Neon nur für Aktionen
Deploy / check (push) Has been cancelled
Details
Deploy / deploy (push) Has been cancelled
Details

Browse Source 
In Gitea ist fast jeder Text ein Link (a { color: var(--color-primary) }),
eine Aktivitätsseite besteht praktisch nur daraus. Das volle #f5c518 hat
90 % Sättigung — als Akzent gedacht, nicht für Fließtext, und blendet
entsprechend.

Links, Flächen und Tönungen nutzen jetzt ein entsättigtes Gold (#dcc275,
47 % Sättigung, Kontrast 11:1 auf Schwarz). Das Neon bleibt den Stellen
vorbehalten, wo es wirken soll: Primär-Buttons, aktive Navigation und
Hover — Links leuchten also erst auf, wenn man draufzeigt.

Die Abstufungen (dark-1..7, light-1..7) sind passend zur neuen Basis neu
berechnet. Oben in der Datei steht, wie sich die Intensität nachjustieren
lässt.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-07-31 14:19:53 +02:00
co-authored by Claude Fable 5
parent b5617a9d18
commit 6daa1f7d43
2 changed files with 100 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/gitea-theme/README.md
+19 -4
View File
@@ -1,10 +1,25 @@
# D4RKST3R-Theme für Gitea
Färbt Gitea im Brand-Look ein — Neon-Gelb (`#f5c518`) und Orange (`#ff4d00`)
auf Schwarz, passend zu `bot.d4rkst3r.de` und dem geteilten Design-System.
Färbt Gitea im Brand-Look ein — Gold und Orange auf Schwarz, passend zu
`bot.d4rkst3r.de` und dem geteilten Design-System.
Gebaut gegen die Variablen von **Gitea 1.26**.
## Warum Gold statt Neon-Gelb
In Gitea ist praktisch jeder zweite Text ein Link (`a { color: var(--color-primary) }`),
und eine Aktivitätsseite besteht fast nur daraus. Das volle Neon-Gelb `#f5c518`
ist mit 90 % Sättigung für einen Akzent gedacht, nicht für Fließtext — auf Dauer
blendet das.
Deshalb: Links und Flächen nutzen ein entsättigtes Gold (`#dcc275`, 47 %
Sättigung, Kontrast 11:1 auf Schwarz). Das volle Neon bleibt den Stellen
vorbehalten, wo es wirken soll — Buttons, aktive Navigation und Hover.
Zu bunt oder zu blass? Ganz oben in der CSS-Datei steht, welche Werte du für
`--color-primary` einsetzen kannst (von `#c9b98f` sehr ruhig bis `#f5c518`
zurück auf volle Kraft).
## Einbau
Die Datei muss in den `custom`-Ordner deiner Gitea-Instanz. Bei einer
@@ -39,8 +54,8 @@ neue Konten und alle, die nie umgestellt haben.
## Was das Theme ändert
* **Marke:** Primärfarbe Gelb statt Gitea-Blau, Orange als Akzent;
Buttons bekommen dunklen Text für ordentlichen Kontrast
* **Marke:** Primärfarbe Gold statt Gitea-Blau, Orange als Akzent;
Buttons in vollem Neon mit dunklem Text für ordentlichen Kontrast
* **Flächen:** durchgehend Schwarz (`#0a0a0a`) statt Dunkelgrau, Karten und
Menüs eine Stufe heller
* **Diffs:** Grün/Rot bleiben erhalten (Lesbarkeit geht vor Marke), nur
docs/gitea-theme/theme-d4rkst3r.css
+81 -59
View File
@@ -1,41 +1,53 @@
/* ═══════════════════════════════════════════════════
D4RKST3R — Gitea-Theme
Neon-Gelb/Orange auf Schwarz, passend zu bot.d4rkst3r.de
Gold/Orange auf Schwarz, passend zu bot.d4rkst3r.de
Einbau: custom/public/assets/css/theme-d4rkst3r.css
danach Gitea neu starten und das Theme unter
Einstellungen → Aussehen auswählen.
── Augenfreundlichkeit ──
In Gitea ist fast jeder Text ein Link, deshalb ist die Grundfarbe
ein ruhiges Gold (#dcc275) statt des vollen Neon-Gelbs. Das Neon
(#f5c518) erscheint nur dort, wo es soll: Buttons, Hover und
aktive Elemente.
Zu bunt? --color-primary auf #d4bd7f oder #c9b98f setzen.
Zu blass? Auf #e8cd6b — oder ganz zurück auf #f5c518.
═══════════════════════════════════════════════════ */
:root {
/* ── Marke ───────────────────────────────────── */
--color-primary: #f5c518;
--color-primary-contrast: #0a0a0a; /* Text auf gelben Flächen */
--color-primary-hover: #ffd633;
--color-primary-active: #e0b40f;
--color-primary-dark-1: #e0b40f;
--color-primary-dark-2: #c9a20c;
--color-primary-dark-3: #b28f0a;
--color-primary-dark-4: #9b7c08;
--color-primary-dark-5: #7d6406;
--color-primary-dark-6: #5e4b05;
--color-primary-dark-7: #3f3203;
--color-primary-light-1: #f7cd35;
--color-primary-light-2: #f9d552;
--color-primary-light-3: #fadd6f;
--color-primary-light-4: #fce58c;
--color-primary-light-5: #fdeda9;
--color-primary-light-6: #fef4c6;
--color-primary-light-7: #fefae3;
--color-primary-alpha-10: #f5c5181a;
--color-primary-alpha-20: #f5c51833;
--color-primary-alpha-30: #f5c5184d;
--color-primary-alpha-40: #f5c51866;
--color-primary-alpha-50: #f5c51880;
--color-primary-alpha-60: #f5c51899;
--color-primary-alpha-70: #f5c518b3;
--color-primary-alpha-80: #f5c518cc;
--color-primary-alpha-90: #f5c518e6;
--color-primary: #dcc275; /* Links, Akzente — bewusst entsättigt */
--color-primary-contrast: #0a0a0a; /* Text auf goldenen Flächen */
--color-primary-hover: #f5c518; /* Hover leuchtet auf */
--color-primary-active: #f5c518;
--color-primary-dark-1: #d6b85f;
--color-primary-dark-2: #d1ae48;
--color-primary-dark-3: #caa433;
--color-primary-dark-4: #b3922d;
--color-primary-dark-5: #9d7f28;
--color-primary-dark-6: #876d22;
--color-primary-dark-7: #705b1c;
--color-primary-light-1: #ddc88b;
--color-primary-light-2: #e2d19d;
--color-primary-light-3: #e7d9ae;
--color-primary-light-4: #ede1c0;
--color-primary-light-5: #f2ead2;
--color-primary-light-6: #f7f2e4;
--color-primary-light-7: #fcfaf5;
--color-primary-alpha-10: #dcc2751a;
--color-primary-alpha-20: #dcc27533;
--color-primary-alpha-30: #dcc2754d;
--color-primary-alpha-40: #dcc27566;
--color-primary-alpha-50: #dcc27580;
--color-primary-alpha-60: #dcc27599;
--color-primary-alpha-70: #dcc275b3;
--color-primary-alpha-80: #dcc275cc;
--color-primary-alpha-90: #dcc275e6;
/* Volles Neon — nur für Buttons und aktive Zustände */
--d4rk-neon: #f5c518;
/* Orange als Akzent (Links, Hervorhebungen) */
--color-accent: #ff4d00;
@@ -52,17 +64,17 @@
--color-footer: #0d0d0d;
--color-menu: #111111;
--color-card: #111111;
--color-markup-code-block: #f5c5180f;
--color-markup-code-block: #dcc2750f;
--color-code-bg: #111111;
--color-code-sidebar-bg: #141414;
--color-console-bg: #0a0a0a;
--color-console-fg: #e8e0d0;
--color-console-fg-subtle: #8a8378;
--color-console-border: #f5c51826;
--color-console-hover-bg: #f5c5180f;
--color-console-active-bg: #f5c51817;
--color-console-border: #dcc27526;
--color-console-hover-bg: #dcc2750f;
--color-console-active-bg: #dcc27517;
--color-console-menu-bg: #111111;
--color-console-menu-border: #f5c51826;
--color-console-menu-border: #dcc27526;
/* ── Text ────────────────────────────────────── */
--color-text: #e8e0d0;
@@ -89,18 +101,18 @@
--color-secondary-alpha-70: #2a2a2ab3;
--color-secondary-alpha-80: #2a2a2acc;
--color-secondary-alpha-90: #2a2a2ae6;
--color-secondary-button: #f5c5181a;
--color-secondary-hover: #f5c51826;
--color-secondary-active: #f5c51833;
--color-secondary-button: #dcc2751a;
--color-secondary-hover: #dcc27526;
--color-secondary-active: #dcc27533;
--color-light: #f5c5180d;
--color-light-border: #f5c51826;
--color-light-mimic-enabled: #f5c5181a;
--color-hover: #f5c5180f;
--color-active: #f5c51817;
--color-light: #dcc2750d;
--color-light-border: #dcc27526;
--color-light-mimic-enabled: #dcc2751a;
--color-hover: #dcc2750f;
--color-active: #dcc27517;
--color-input-background: #0f0f0f;
--color-input-border: #2a2a2a;
--color-input-border-hover: #f5c51866;
--color-input-border-hover: #dcc27566;
--color-input-text: #e8e0d0;
--color-input-toggle-background: #1a1a1a;
--color-button: #161616;
@@ -135,8 +147,8 @@
--color-green-badge-bg: #00c46a26;
--color-red-badge: #f23f431a;
--color-red-badge-bg: #f23f4326;
--color-yellow-badge: #f5c5181a;
--color-yellow-badge-bg: #f5c51826;
--color-yellow-badge: #dcc2751a;
--color-yellow-badge-bg: #dcc27526;
--color-orange-badge: #ff4d001a;
--color-orange-badge-bg: #ff4d0026;
@@ -152,23 +164,23 @@
--color-diff-removed-word-bg: #f23f4333;
--color-diff-removed-linenum-bg: #f23f431a;
--color-diff-inactive: #111111;
--color-diff-moved-row-bg: #f5c51812;
--color-diff-moved-row-border: #f5c51826;
--color-diff-moved-row-bg: #dcc27512;
--color-diff-moved-row-border: #dcc27526;
/* ── Sonstiges ───────────────────────────────── */
--color-timeline: #2a2a2a;
--color-editor-line-highlight: #f5c5180d;
--color-editor-line-highlight: #dcc2750d;
--color-project-column-bg: #111111;
--color-reaction-bg: #f5c5181a;
--color-reaction-hover-bg: #f5c51833;
--color-reaction-active-bg: #f5c51826;
--color-reaction-bg: #dcc2751a;
--color-reaction-hover-bg: #dcc27533;
--color-reaction-active-bg: #dcc27526;
--color-tooltip-bg: #1a1a1a;
--color-tooltip-text: #e8e0d0;
--color-nav-text: #c9c2b4;
--color-label-text: #e8e0d0;
--color-label-bg: #f5c5181a;
--color-label-hover-bg: #f5c51833;
--color-label-active-bg: #f5c51826;
--color-label-bg: #dcc2751a;
--color-label-hover-bg: #dcc27533;
--color-label-active-bg: #dcc27526;
}
/* ── Feinschliff im D4RKST3R-Stil ─────────────────── */
@@ -182,20 +194,30 @@
box-shadow: 0 1px 0 0 var(--color-primary-alpha-20);
}
/* Aktive Navigation glüht leicht */
/* Aktive Navigation darf leuchten — ist ja nur ein Element */
#navbar .item.active {
color: var(--color-primary) !important;
text-shadow: 0 0 12px var(--color-primary-alpha-40);
color: var(--d4rk-neon) !important;
text-shadow: 0 0 12px #f5c51840;
}
/* Primär-Buttons kräftiger */
/* Primär-Buttons: hier das volle Neon, davon gibt es wenige */
.ui.primary.button,
.ui.primary.buttons .button {
background: var(--d4rk-neon);
color: #0a0a0a;
font-weight: 600;
letter-spacing: .02em;
}
.ui.primary.button:hover {
box-shadow: 0 0 16px var(--color-primary-alpha-30);
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background: #ffd633;
color: #0a0a0a;
box-shadow: 0 0 16px #f5c5184d;
}
/* Links beim Draufzeigen aufleuchten lassen */
a:hover {
color: var(--color-primary-hover);
}
/* Repo-Titel in Markenfarbe */