/* * FSG Dark Mode — phase 1 (quick win) * * Additive override stylesheet: main.css stays untouched. * Active on (opt-in via toggle, localStorage * "fsgTheme", no-FOUC snippet in ) — since round 5 also for the * public website (logged out); default stays light. * * Color system: see Nextcloud-FSG/Admin/Typo3/DarkMode/2026-07-07_darkmode-designplan.md */ /* ------------------------------------------------------------------ */ /* Theme toggle in the service nav (always styled) */ /* ------------------------------------------------------------------ */ .theme-toggle::before {content: "\f186";} /* fa-moon */ html[data-theme="dark"] body .theme-toggle::before {content: "\f185"; color: var(--fsg_gold);} /* fa-sun */ /* ------------------------------------------------------------------ */ /* Token switching */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body { color-scheme: dark; /* dark tokens (new) */ --dm-bg-page: #1D1D1B; /* = --fsg_black, corporate design */ --dm-bg-surface: #242527; --dm-bg-raised: #2C2E31; --dm-bg-hover: #35373B; --dm-txt: #E7E9EC; --dm-txt-2nd: #9DA2A8; --dm-link: #4FA8DF; /* lightened --fsg_blue */ --dm-danger-txt: #F1545E; /* lightened --fsg_red */ /* For templates: var(--bg-content, #fff) etc. — in light mode the fallback applies (token undefined), in dark mode these values */ --bg-content: var(--dm-bg-surface); --bg-tooltip: var(--dm-bg-raised); --bg-ignored: #4A4D52; --txt-on-ignored: #E7E9EC; /* zebra: clearly visible "dark" vs. "very dark" */ --bg-stripe-even: #2A2D31; --bg-stripe-odd: #1F2022; --bg-team-even: #33363B; --bg-team-odd: #2A2C30; --bg-hover-info: #35373B; /* error hint boxes (e.g. Keycloak hint on the login page) */ --bg-alert-err: #3B2528; --txt-alert-err: #E7E9EC; /* status tokens for status.css (fsg-* classes in templates + SQL query HTML) */ --st-ok: #8CCB4F; /* lightened --fsg_green */ --st-err: #F1545E; /* lightened --fsg_red */ --st-warn: #F0A73A; --st-info: #4FA8DF; --st-muted: #9DA2A8; --st-signal: #7BA3F5; --st-teal: #2BBFA8; --st-orange: #F0A73A; --st-brown: #C89B6E; --st-bg-muted: #3A3D42; --st-bg-muted-txt: #E7E9EC; /* intensity ramp: dark greens instead of pastels */ --st-scale-1: #1F3327; --st-scale-2: #24422F; --st-scale-3: #2B5439; --st-scale-4: #346845; --st-scale-5: #3E7D52; /* remap existing light tokens -> flips every var() usage in main.css */ --txt_black: var(--dm-txt); --border: #3A3D42; --gray-f1: var(--dm-bg-raised); --gray-f4: #26272A; --gray-f5: #2A2D31; /* zebra stripe "dark" (even rows) */ --gray-f8: var(--dm-bg-surface); --gray-dark: #C3C7CC; /* used as text color (accordion, dt-info) */ --charcoal: #D5D8DB; /* text color in wrl_table th */ --silver: #6E7378; /* mixed usage bg/border/text */ background-color: var(--dm-bg-page); color: var(--dm-txt); } /* ------------------------------------------------------------------ */ /* Base: links, text */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body a {color: var(--dm-link);} html[data-theme="dark"] body a:hover, html[data-theme="dark"] body a:hover::before {color: var(--dm-danger-txt);} /* ------------------------------------------------------------------ */ /* Header, top nav, service nav */ /* ------------------------------------------------------------------ */ /* header: slightly lighter on the left (keeps the dark F of the logo readable), fades into the surface */ html[data-theme="dark"] body #site-header {background: linear-gradient(90deg, #3A3D43 0, #2E3035 160px, var(--dm-bg-surface) 380px); border-bottom: 1px solid var(--border);} html[data-theme="dark"] body #servicenav a, html[data-theme="dark"] body #mobile-header a, html[data-theme="dark"] body #breadcrumb a {color: var(--dm-txt);} html[data-theme="dark"] body #servicenav a:hover, html[data-theme="dark"] body #mobile-header a:hover, html[data-theme="dark"] body #breadcrumb a:hover {color: var(--dm-danger-txt);} html[data-theme="dark"] body #auth .servicebar {border-left-color: var(--border);} /* logo: untouched — readability of the F comes from the lighter header gradient on the left (see #site-header above) */ /* 2nd level dropdown: dark frosted glass instead of light */ html[data-theme="dark"] body .navbar #topnav .secondlvl {background: rgba(36, 37, 39, 0.75); border-color: var(--border); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);} html[data-theme="dark"] body .navbar #topnav .secondlvl::after {background-color: rgba(29, 29, 27, 0.5);} /* active item: gold surface needs dark text (hardcoded black already fits, just make sure) */ html[data-theme="dark"] body .navbar #topnav .secondlvl > li.act > a {color: #1D1D1B;} /* sidebar flyout (collapsed sidenav, hover preview): dark frosted glass */ html[data-theme="dark"] body #auth #innerwrapper.closed.sidenav-preview #leftcol {background: rgba(36, 37, 39, 0.8); border-right-color: var(--border); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);} /* mobile menu (mmenu light) */ html[data-theme="dark"] body .mm-spn.mm-spn--light {background: var(--dm-bg-surface); color: var(--dm-txt);} /* ------------------------------------------------------------------ */ /* Sidebar */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body #sidenav ul > li > a {border-left-color: var(--dm-bg-raised);} html[data-theme="dark"] body #sidenav ul > li.cur > a {color: #1D1D1B;} /* text on gold */ /* ------------------------------------------------------------------ */ /* Content components (hardcoded white in main.css) */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body .frame-layout-1 .text-frame {background-color: var(--dm-bg-surface);} html[data-theme="dark"] body .news-list-view .article {background-color: #26282B; border: 1px solid #33363B;} /* news image area light: dark logos in news images stay visible, photos cover the area anyway */ html[data-theme="dark"] body .news-list-view .news-img-wrap {background-color: #D6D8DB;} /* partner/sponsor logos in content: light surface (logos unaltered) */ html[data-theme="dark"] body #maincol .sponsoren_logos {background-color: #D6D8DB; border-radius: 4px; padding: 15px 20px;} html[data-theme="dark"] body #maincol .frame-type-textpic .ce-gallery figure.image {background-color: #D6D8DB; border-radius: 4px;} html[data-theme="dark"] body figcaption {color: var(--dm-txt);} html[data-theme="dark"] body .frame-layout-4 figcaption {color: var(--dm-txt);} html[data-theme="dark"] body .modal {background: var(--dm-bg-raised); border: 1px solid var(--border);} html[data-theme="dark"] body .upload-state.neutral {background-color: var(--dm-bg-surface) !important;} /* login and registration boxes */ html[data-theme="dark"] body .frame-type-felogin_login, html[data-theme="dark"] body .layout-100.layout-intended .tx-srfeuserregister-pi1 form {background-color: var(--dm-bg-surface); box-shadow: none; border: 1px solid var(--border);} /* standard tables (zebra: even rows follow --gray-f5 automatically, odd rows are hardcoded white in main.css) */ html[data-theme="dark"] body .overview thead, html[data-theme="dark"] body .contenttable thead, html[data-theme="dark"] body .table-fsg1 thead, html[data-theme="dark"] body table.data thead, html[data-theme="dark"] body .wrl_table thead {background-color: var(--dm-bg-raised);} html[data-theme="dark"] body .overview tbody, html[data-theme="dark"] body .contenttable tbody, html[data-theme="dark"] body .table-fsg1 tbody, html[data-theme="dark"] body table.data tbody, html[data-theme="dark"] body .wrl_table tbody {background-color: var(--bg-stripe-odd);} html[data-theme="dark"] body .overview tbody > tr:nth-child(2n+1), html[data-theme="dark"] body .contenttable tbody > tr:nth-child(2n+1), html[data-theme="dark"] body .table-fsg1 tbody > tr:nth-child(2n+1), html[data-theme="dark"] body table.data tbody > tr:nth-child(2n+1), html[data-theme="dark"] body .wrl_table tbody > tr:nth-child(2n+1) {background: var(--bg-stripe-odd);} html[data-theme="dark"] body .judge-table tr {background: var(--dm-bg-surface);} /* DataTables (main.css sets white !important) */ html[data-theme="dark"] body div.dt-container tbody {background-color: var(--bg-stripe-odd) !important;} html[data-theme="dark"] body div.dt-container table.dataTable tbody tr {background-color: var(--bg-stripe-odd);} html[data-theme="dark"] body div.dt-container table.dataTable tbody tr:nth-child(odd) {background-color: var(--gray-f5);} html[data-theme="dark"] body div.dt-container table.dataTable thead th {background-color: var(--dm-bg-raised); color: var(--dm-txt);} /* generic tables in content */ html[data-theme="dark"] body #maincol table th {background-color: var(--dm-bg-raised);} /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body #maincol input[type="email"], html[data-theme="dark"] body #maincol input[type="password"], html[data-theme="dark"] body #maincol select, html[data-theme="dark"] body #maincol textarea, html[data-theme="dark"] body #maincol input[type="text"] {background-color: var(--dm-bg-raised); color: var(--dm-txt);} /* gold buttons need dark text (would otherwise use the remapped --txt_black) */ html[data-theme="dark"] body #maincol input[type="button"], html[data-theme="dark"] body #maincol input[type="submit"] {color: #1D1D1B;} html[data-theme="dark"] body #maincol input[type="button"]:disabled, html[data-theme="dark"] body #maincol input[type="submit"]:disabled {color: var(--dm-txt);} /* ------------------------------------------------------------------ */ /* Dark footer; partner logos on a light panel (original colors, */ /* no alteration — partner brand guidelines) */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body #wrapper > footer {background-color: var(--dm-bg-surface); border-top-color: var(--border);} html[data-theme="dark"] body #wrapper > footer a {color: var(--dm-txt);} html[data-theme="dark"] body #wrapper > footer a:hover {color: var(--dm-danger-txt);} html[data-theme="dark"] body footer .sponsoren_logos {background-color: #D6D8DB; border-radius: 4px; padding: 12px 16px;} /* social icons: keep circle dark (would otherwise use the remapped --txt_black) */ html[data-theme="dark"] body .socialmedia i {background-color: #3A3D42;} /* ------------------------------------------------------------------ */ /* Images: dim instead of invert (footer logos excluded) */ /* ------------------------------------------------------------------ */ html[data-theme="dark"] body main img {filter: brightness(0.88);} /* ------------------------------------------------------------------ */ /* Legacy guards: catch inline styles from PHP/DB */ /* (attribute substring + !important beats inline styles) */ /* ------------------------------------------------------------------ */ /* zebra stripes, e.g. BackendModule output */ html[data-theme="dark"] body [style*="background-color: #ccc"], html[data-theme="dark"] body [style*="background-color:#ccc"] {background-color: var(--dm-bg-raised) !important;} /* white boxes (confirm gate, srfeuser wrapper etc.) */ html[data-theme="dark"] body [style*="background:#fff"], html[data-theme="dark"] body [style*="background: #fff"], html[data-theme="dark"] body [style*="background-color:#fff"], html[data-theme="dark"] body [style*="background-color: #fff"], html[data-theme="dark"] body [style*="background-color: white"], html[data-theme="dark"] body [style*="background-color:white"] {background-color: var(--dm-bg-surface) !important;} /* gray hint text */ html[data-theme="dark"] body [style*="color:#808080"], html[data-theme="dark"] body [style*="color: #808080"] {color: var(--dm-txt-2nd) !important;} /* legacy HTML bgcolor attribute */ html[data-theme="dark"] body [bgcolor="#FFFFFF"], html[data-theme="dark"] body [bgcolor="#ffffff"] {background-color: var(--dm-bg-surface) !important;} html[data-theme="dark"] body [bgcolor="#cccccc"] {background-color: var(--dm-bg-raised) !important;} /* gray/black inline text without its own background -> light */ html[data-theme="dark"] body [style*="color:black"]:not([style*="background"]), html[data-theme="dark"] body [style*="color: black"]:not([style*="background"]), html[data-theme="dark"] body [style*="color:#333"]:not([style*="background"]) {color: var(--dm-txt) !important;} html[data-theme="dark"] body [style*="color:#999"]:not([style*="background"]), html[data-theme="dark"] body [style*="color:#888"]:not([style*="background"]), html[data-theme="dark"] body [style*="color:#555"]:not([style*="background"]), html[data-theme="dark"] body [style*="color:#666"]:not([style*="background"]), html[data-theme="dark"] body [style*="color:gray"]:not([style*="background"]) {color: var(--dm-txt-2nd) !important;} /* light inline backgrounds (status cells from SQL queries): keep the surface but force dark text -> readable in both themes */ html[data-theme="dark"] body [style*="background-color:LightGray"], html[data-theme="dark"] body [style*="background-color:lightgray"], html[data-theme="dark"] body [style*="background-color:yellow"], html[data-theme="dark"] body [style*="background-color:Yellow"], html[data-theme="dark"] body [style*="background: Yellow"], html[data-theme="dark"] body [style*="background-color:pink"], html[data-theme="dark"] body [style*="background-color:LightSkyBlue"], html[data-theme="dark"] body [style*="background:#EAFAF1"], html[data-theme="dark"] body [style*="background:#D5F5E3"], html[data-theme="dark"] body [style*="background:#ABEBC6"], html[data-theme="dark"] body [style*="background:#82E0AA"], html[data-theme="dark"] body [style*="background:#58D68D"], html[data-theme="dark"] body [style*="background-color:#FF9"], html[data-theme="dark"] body [style*="background-color:#FFFF99"], html[data-theme="dark"] body [style*="background-color:#FFDD00"], html[data-theme="dark"] body [style*="background:#FFDD00"], html[data-theme="dark"] body [style*="background-color:Gold"], html[data-theme="dark"] body [style*="background-color:LightBlue"], html[data-theme="dark"] body [style*="background:LightBlue"], html[data-theme="dark"] body [style*="background-color:Plum"], html[data-theme="dark"] body [style*="background:Plum"], html[data-theme="dark"] body [style*="background-color:Aquamarine"], html[data-theme="dark"] body [style*="background-color:LemonChiffon"], html[data-theme="dark"] body [style*="background:LemonChiffon"], html[data-theme="dark"] body [style*="background-color:Khaki"], html[data-theme="dark"] body [style*="background-color:PaleGreen"], html[data-theme="dark"] body [style*="background-color:LightGreen"], html[data-theme="dark"] body [style*="background-color:LightYellow"], html[data-theme="dark"] body [style*="background-color:#e2e2e2"] {color: #1D1D1B !important;} /* zebra grays from Smarty templates (asf/esf_form_list, teams_admin, registration_pdf, magazine, helpers …): recolor in dark instead of keeping them light */ html[data-theme="dark"] body [style*="background-color:#dcdcdc"] {background-color: var(--bg-team-even) !important; color: var(--dm-txt) !important;} html[data-theme="dark"] body [style*="background-color:#eeeeee"] {background-color: var(--bg-team-odd) !important; color: var(--dm-txt) !important;} html[data-theme="dark"] body [style*="background-color:#ededed"] {background-color: var(--bg-stripe-even) !important; color: var(--dm-txt) !important;} /* amber/green status cells (userupload_admin, partly set via JS -> rgb form) */ html[data-theme="dark"] body [style*="background-color:#eeb912"], html[data-theme="dark"] body [style*="background-color: rgb(238, 185, 18)"], html[data-theme="dark"] body [style*="background-color:#0c0"], html[data-theme="dark"] body [style*="background-color: rgb(0, 204, 0)"] {color: #1D1D1B !important;} html[data-theme="dark"] body [style*="background-color:#eeb912"] a, html[data-theme="dark"] body [style*="background-color: rgb(238, 185, 18)"] a {color: #00427A !important;} /* ------------------------------------------------------------------ */ /* Per-page styles from sys_template records ("+ext css wide left ...") */ /* Those records set light zebra/popup colors via