From 6daa1f7d438a7f49123c6ea52297432f88b457e9 Mon Sep 17 00:00:00 2001 From: D4rkst3r Date: Fri, 31 Jul 2026 14:19:53 +0200 Subject: [PATCH] =?UTF-8?q?Gitea-Theme=20augenfreundlicher:=20Gold=20f?= =?UTF-8?q?=C3=BCr=20Links,=20Neon=20nur=20f=C3=BCr=20Aktionen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- docs/gitea-theme/README.md | 23 ++++- docs/gitea-theme/theme-d4rkst3r.css | 140 ++++++++++++++++------------ 2 files changed, 100 insertions(+), 63 deletions(-) diff --git a/docs/gitea-theme/README.md b/docs/gitea-theme/README.md index 121d8d5..5ec2947 100644 --- a/docs/gitea-theme/README.md +++ b/docs/gitea-theme/README.md @@ -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 diff --git a/docs/gitea-theme/theme-d4rkst3r.css b/docs/gitea-theme/theme-d4rkst3r.css index 99fa0d3..812b6a7 100644 --- a/docs/gitea-theme/theme-d4rkst3r.css +++ b/docs/gitea-theme/theme-d4rkst3r.css @@ -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 */