/* * ========================================================================== * REDMINE DARK MODE - Deep Purple & Magenta Theme * ========================================================================== * * Funktionsweise: * Der Dark Mode nutzt CSS filter:invert(90%) auf dem , um alle Farben * automatisch zu invertieren. Dies ist effizient, erfordert aber spezielle * Behandlung für bestimmte Elemente (Bilder, Icons, bestimmte Farben). * * Zwei Aktivierungsmodi: * 1. Manuell: Klick auf Toggle-Button fügt class="dark" zu body hinzu * 2. Automatisch: @media (prefers-color-scheme: dark) für Systemeinstellung * * Repository: https://github.com/KLIEBHAN/redmine_dark * Original: https://github.com/fraoustin/redmine_dark */ /* ========================================================================== FARBPALETTE ========================================================================== Wichtig: Farben verhalten sich unterschiedlich je nach Kontext: - DIREKT: Farbe wird direkt angezeigt (z.B. auf html, vor body-Filter) - NACH INVERSION: Farbe durchläuft body's invert(90%) - NACH DOPPEL-INVERSION: Farbe durchläuft invert(90%) + invert(100%) Mathematik der 90%-Inversion: angezeigte_farbe = 229.5 - (0.9 × gesetzte_farbe) Um eine Zielfarbe zu erreichen: zu_setzende_farbe = (229.5 - zielfarbe) / 0.9 ========================================================================== */ :root { /* --- Hintergrundfarben (direkt verwendet, vor Inversion) --- */ --bg-page: #001F3F; /* Aubergine - Seitenhintergrund */ --bg-elevated: #2A2430; /* Leicht heller - für Flyouts, Dropdowns */ /* --- Akzentfarben (finale Anzeigefarben) --- */ --accent-primary: #00BFFF; /* Rosa - Hauptakzent */ --accent-secondary: #ADD8E6; /* Helles Rosa - Hover, Sekundär */ --accent-tertiary: #B0E0E6; /* Noch heller - für Prioritäten */ /* --- UI-Farben (für spezifische Elemente) --- */ --ui-hover-dark: #4682B4; /* Dunkler Hover (z.B. Menü) */ --ui-hover-light: #F5F0F3; /* Heller Hover (z.B. Tabellenzeilen) */ --ui-pagination: #9E4A6A; /* Aktive Pagination */ --ui-header: #F5F5F5; /* Header-Hintergrund */ /* --- Text: Direkt verwendete Farben --- */ --text-light: #EAEAEA; /* Heller Text */ --text-dark: #001F3F; /* Dunkler Text */ /* --- Text: Farben die durch Inversion gehen --- Diese "seltsamen" Farben ergeben nach invert(90%) die gewünschten Farben */ --text-shows-light: #000000; /* Wird zu ~#E5E5E5 (hellgrau) */ --text-shows-dark: #091B00; /* Wird zu hellem Lavendel */ /* --- Akzent: Farben die durch Inversion gehen --- */ --accent-shows-primary: #29996F; /* Wird zu #00BFFF (Rosa) */ --accent-shows-secondary: #1AAA6A; /* Wird zu #ADD8E6 (Helles Rosa) */ /* --- Spezialfall: Doppelte Inversion --- Für Elemente mit eigenem invert(100%) innerhalb des invertierten body. Mathematik: final = 25.5 + 0.9 × input (90% + 100% = ~10% Aufhellung) */ --text-double-invert: #F6E4FF; /* Wird zu hellem Lavendel */ --text-light-double-invert: #E3E3E3; /* Wird zu weißlich ~#E5E5E5 */ } /* ========================================================================== DARK MODE TOGGLE (Schaltfläche im Header) ========================================================================== */ #dark { float: right; margin: 0 8px; font-weight: bold; color: var(--text-light); } /* ========================================================================== DARK MODE STYLES ========================================================================== HINWEIS ZUR CODE-DUPLIKATION: Die folgenden Styles existieren zweimal - einmal für body.dark (manueller Toggle) und einmal für @media (prefers-color-scheme: dark) (automatisch). Diese Duplikation ist in reinem CSS unvermeidbar, da: - body.dark erfordert den Selektor "body.dark element" - @media erfordert den Selektor "body element" innerhalb des Media-Blocks Bei Änderungen BEIDE Sektionen synchron halten! ========================================================================== */ /* -------------------------------------------------------------------------- MANUELLER DARK MODE (aktiviert via JavaScript Toggle) -------------------------------------------------------------------------- */ html.dark { background-color: var(--bg-page); } body.dark { /* Kernmechanismus: Invertiert 90% aller Farben automatisch */ filter: invert(90%); } /* --- Inversion-Kompensation für Icons --- Icons haben eigene Farben die durch body-Inversion falsch werden. Lösung: Gegen-Inversion mit 100% stellt ursprüngliche Farben wieder her. */ body.dark:not(.theme-Rtmaterial) .icon { filter: invert(100%); color: var(--text-double-invert) !important; } /* --- SVG-Icons: Kontextabhängige Behandlung --- Standalone-SVGs brauchen Inversion, aber SVGs INNERHALB von .icon-Elementen würden sonst doppelt invertiert (einmal durch .icon, einmal durch sich selbst) */ body.dark svg.icon-svg { filter: invert(100%); color: var(--text-light-double-invert) !important; stroke: var(--text-light-double-invert) !important; } body.dark .icon svg.icon-svg { filter: unset; /* SVG selbst nicht invertieren, aber .icon ist bereits invertiert */ color: var(--text-light-double-invert) !important; stroke: var(--text-light-double-invert) !important; } /* --- Bilder und Grafiken --- Diese Elemente sollen ihre Originalfarben behalten, daher Gegen-Inversion */ body.dark .badge, body.dark img.gravatar, body.dark img.filecontent.image, body.dark .wiki img, body.dark .attachments .images img, body.dark table.indicator.summary, body.dark canvas.chartjs-render-monitor, body.dark .diff_out, body.dark .diff_in { filter: invert(100%); } /* --- Überfällige Tickets: Visuelle Hervorhebung --- */ body.dark table.list tr.overdue td.due_date, body.dark div.issue.overdue .due-date .value { filter: invert(100%); color: var(--accent-secondary); } /* --- Header-Bereich: Transparenter Hintergrund für cleanes Design --- */ body.dark #header, body.dark #top-menu, body.dark #project-jump .drdn-trigger { background: transparent !important; color: var(--text-shows-dark) !important; } body.dark #top-menu #loggedas { color: var(--text-shows-dark) !important; } /* --- Überschriften und wichtige Links: Einheitliche dunkle Textfarbe --- */ body.dark #header a, body.dark #top-menu a, body.dark #content h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, body.dark #main a.user { color: var(--text-shows-dark) !important; } /* --- Content-Links: Weiß für bessere Lesbarkeit --- */ body.dark #content a, body.dark #content a:link, body.dark #content a:visited { color: #000000 !important; /* Wird zu ~#E5E5E5 nach 90%-Inversion */ } body.dark #content a:hover, body.dark #content a:focus { color: var(--accent-shows-secondary) !important; } /* Icon-Links: Diese haben doppelte Inversion (90% + 100%), daher andere Farbe */ body.dark #content a.icon, body.dark #content a.icon:link, body.dark #content a.icon:visited { color: var(--text-light-double-invert) !important; /* Wird zu ~#E5E5E5 nach Doppel-Inversion */ } /* Wiki-Links: Dunkle Farbe wie Überschriften für Konsistenz */ body.dark .wiki a, body.dark .wiki a:link, body.dark .wiki a:visited { color: var(--text-shows-dark) !important; } /* --- Buttons: Einheitliches Design für alle Button-Typen --- Sowohl als auch Link-Buttons (.icon-add) */ body.dark input[type="submit"], body.dark #content a.icon-add, body.dark #content a.icon-add:link, body.dark #content a.icon-add:visited { background-color: var(--accent-primary) !important; color: var(--text-shows-light) !important; /* Schwarz → wird hellgrau */ border: 1px solid var(--accent-primary) !important; filter: unset !important; /* Verhindert Icon-Filter auf Buttons */ padding: 4px 8px; border-radius: 3px; text-decoration: none; } body.dark input[type="submit"]:hover, body.dark #content a.icon-add:hover { background-color: var(--accent-secondary) !important; border-color: var(--accent-secondary) !important; } /* Button-Icons: Müssen gleiche Farbe wie Button-Text haben. Da filter:unset den Icon-Filter aufhebt, brauchen wir die Inversion-Farbe */ body.dark #content a.icon-add::before { color: var(--text-shows-light) !important; } /* --- Sidebar --- */ body.dark #sidebar a.selected { background-color: unset !important; color: var(--text-dark); } /* --- Formulare: Entferne störende Hintergründe --- */ body.dark #login-form, body.dark .nodata { background: unset !important; border: unset !important; } /* --- Form-Inputs: Akzentfarbe für Checkboxen etc. --- */ body.dark input { accent-color: var(--accent-primary) !important; } body.dark input[type="date"] { color-scheme: dark; } body.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(100%); } /* --- Issue-Detailseite --- */ body.dark div.issue { background: transparent !important; } /* --- Flyout-Menüs und Dropdowns --- */ body.dark .flyout-menu { background-color: var(--bg-elevated); } /* --- Flash-Nachrichten --- */ body.dark div.flash.notice { background-color: transparent !important; border-color: var(--accent-primary) !important; } /* --- Hover-Effekte für Tabellen und Listen --- */ body.dark table.list:not(.odd-even) tbody tr:hover, body.dark .odd:hover, body.dark .even:hover, body.dark #issue-changesets div.changeset:hover { background-color: var(--ui-hover-light); } /* --- Hauptmenü --- */ body.dark #main-menu, body.dark #main-menu li a, body.dark #main-menu li a.selected, body.dark #main-menu li a:hover, body.dark #main-menu .menu-children li a:hover { color: var(--text-dark); background: var(--ui-header); } body.dark #main-menu li a.new-object { background: var(--ui-header); } body.dark #main-menu .menu-children li a:hover, body.dark .pagination ul.pages li.page:hover { background-color: var(--ui-hover-dark); } body.dark #main-menu li a.selected, body.dark .ui-widget-header, body.dark #main-menu .menu-children { border-color: var(--accent-primary) !important; } /* --- Warnungen und Fehler --- */ body.dark .nodata, body.dark .warning, body.dark #errorExplanation, body.dark #flash_error, body.dark div.flash.notice, body.dark .highlight { color: var(--text-dark); } /* --- Tabs: Aktiver Tab mit Akzent-Unterstrich --- */ body.dark #content .tabs ul li a { border-bottom: 3px solid transparent; } body.dark #content .tabs ul li a.selected { border-bottom: 3px solid var(--accent-primary) !important; background: transparent !important; } body.dark #content .tabs ul li a:hover { border-bottom: 3px solid var(--accent-secondary) !important; } /* --- Pagination --- */ body.dark .pagination ul.pages li:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } body.dark .pagination ul.pages li { border: 1px solid var(--ui-hover-dark); } body.dark .pagination ul.pages li.current { color: var(--text-light); background-color: var(--ui-pagination); border-color: var(--ui-pagination); } /* --- Select-Dropdowns --- */ body.dark select option, body.dark select optgroup { color: var(--text-light); background-color: var(--bg-page); } /* --- Progress-Bar: Akzentfarben für Fortschritt --- */ body.dark table.progress td.closed { background-color: var(--accent-primary) !important; } body.dark table.progress td.done { background-color: var(--accent-secondary) !important; } /* --- Activity und Suche --- */ body.dark #activity dt a, body.dark #search-results dt a { color: var(--text-light); } /* --- RTmaterial Theme Kompatibilität --- */ body.dark.theme-Rtmaterial tr.priority-default td.priority { border-color: var(--accent-secondary); } body.dark.theme-Rtmaterial tr.priority-lowest td.priority { border-color: var(--accent-primary); } body.dark.theme-Rtmaterial tr.priority-highest td.priority { border-color: var(--accent-tertiary); } body.dark.theme-Rtmaterial tr.overdue td:first-child, body.dark.theme-Rtmaterial #my-page tr.overdue td.id { border-left: 3px solid var(--accent-secondary) !important; } /* -------------------------------------------------------------------------- AUTOMATISCHER DARK MODE (via Systemeinstellung) -------------------------------------------------------------------------- Identisch zu body.dark, aber aktiviert durch OS-Präferenz. Bei Änderungen BEIDE Sektionen synchron halten! -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { /* Toggle-Button verstecken wenn System-Dark-Mode aktiv */ #dark { display: none; } html { background-color: var(--bg-page); } body { filter: invert(90%); } /* Icons */ body:not(.theme-Rtmaterial) .icon { filter: invert(100%); color: var(--text-double-invert) !important; } body svg.icon-svg { filter: invert(100%); color: var(--text-light-double-invert) !important; stroke: var(--text-light-double-invert) !important; } body .icon svg.icon-svg { filter: unset; color: var(--text-light-double-invert) !important; stroke: var(--text-light-double-invert) !important; } /* Bilder */ body .badge, body img.gravatar, body img.filecontent.image, body .wiki img, body .attachments .images img, body table.indicator.summary, body canvas.chartjs-render-monitor, body .diff_out, body .diff_in { filter: invert(100%); } /* Überfällige Tickets */ body table.list tr.overdue td.due_date, body div.issue.overdue .due-date .value { filter: invert(100%); color: var(--accent-secondary); } /* Header */ body #header, body #top-menu, body #project-jump .drdn-trigger { background: transparent !important; color: var(--text-shows-dark) !important; } body #top-menu #loggedas { color: var(--text-shows-dark) !important; } /* Überschriften */ body #header a, body #top-menu a, body #content h1, body h2, body h3, body h4, body h5, body h6, body #main a.user { color: var(--text-shows-dark) !important; } /* Content-Links: Weiß für bessere Lesbarkeit */ body #content a, body #content a:link, body #content a:visited { color: #000000 !important; /* Wird zu ~#E5E5E5 nach 90%-Inversion */ } body #content a:hover, body #content a:focus { color: var(--accent-shows-secondary) !important; } /* Icon-Links: Diese haben doppelte Inversion (90% + 100%), daher andere Farbe */ body #content a.icon, body #content a.icon:link, body #content a.icon:visited { color: var(--text-light-double-invert) !important; } /* Wiki-Links */ body .wiki a, body .wiki a:link, body .wiki a:visited { color: var(--text-shows-dark) !important; } /* Buttons */ body input[type="submit"], body #content a.icon-add, body #content a.icon-add:link, body #content a.icon-add:visited { background-color: var(--accent-primary) !important; color: var(--text-shows-light) !important; border: 1px solid var(--accent-primary) !important; filter: unset !important; padding: 4px 8px; border-radius: 3px; text-decoration: none; } body input[type="submit"]:hover, body #content a.icon-add:hover { background-color: var(--accent-secondary) !important; border-color: var(--accent-secondary) !important; } body #content a.icon-add::before { color: var(--text-shows-light) !important; } /* Sidebar */ body #sidebar a.selected { background-color: unset !important; color: var(--text-dark); } /* Formulare */ body #login-form, body .nodata { background: unset !important; border: unset !important; } /* Inputs */ body input { accent-color: var(--accent-primary) !important; } body input[type="date"] { color-scheme: dark; } body input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(100%); } /* Issue-Detail */ body div.issue { background: transparent !important; } /* Flyout */ body .flyout-menu { background-color: var(--bg-elevated); } /* Flash */ body div.flash.notice { background-color: transparent !important; border-color: var(--accent-primary) !important; } /* Hover */ body table.list:not(.odd-even) tbody tr:hover, body .odd:hover, body .even:hover, body #issue-changesets div.changeset:hover { background-color: var(--ui-hover-light); } /* Hauptmenü */ body #main-menu, body #main-menu li a, body #main-menu li a.selected, body #main-menu li a:hover, body #main-menu .menu-children li a:hover { color: var(--text-dark); background: var(--ui-header); } body #main-menu li a.new-object { background: var(--ui-header); } body #main-menu .menu-children li a:hover, body .pagination ul.pages li.page:hover { background-color: var(--ui-hover-dark); } body #main-menu li a.selected, body .ui-widget-header, body #main-menu .menu-children { border-color: var(--accent-primary) !important; } /* Warnungen */ body .nodata, body .warning, body #errorExplanation, body #flash_error, body div.flash.notice, body .highlight { color: var(--text-dark); } /* Tabs */ body #content .tabs ul li a { border-bottom: 3px solid transparent; } body #content .tabs ul li a.selected { border-bottom: 3px solid var(--accent-primary) !important; background: transparent !important; } body #content .tabs ul li a:hover { border-bottom: 3px solid var(--accent-secondary) !important; } /* Pagination */ body .pagination ul.pages li:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } body .pagination ul.pages li { border: 1px solid var(--ui-hover-dark); } body .pagination ul.pages li.current { color: var(--text-light); background-color: var(--ui-pagination); border-color: var(--ui-pagination); } /* Dropdowns */ body select option, body select optgroup { color: var(--text-light); background-color: var(--bg-page); } /* Progress */ body table.progress td.closed { background-color: var(--accent-primary) !important; } body table.progress td.done { background-color: var(--accent-secondary) !important; } /* Activity */ body #activity dt a, body #search-results dt a { color: var(--text-light); } /* RTmaterial */ body.theme-Rtmaterial tr.priority-default td.priority { border-color: var(--accent-secondary); } body.theme-Rtmaterial tr.priority-lowest td.priority { border-color: var(--accent-primary); } body.theme-Rtmaterial tr.priority-highest td.priority { border-color: var(--accent-tertiary); } body.theme-Rtmaterial tr.overdue td:first-child, body.theme-Rtmaterial #my-page tr.overdue td.id { border-left: 3px solid var(--accent-secondary) !important; } }