/* * 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) */ /* ------------------------------------------------------------------ */ /* icons (fa-solid, colors follow the menu): auto = circle-half-stroke; on a light page the moon-star (switch to dark), on a dark page the sun-bright (switch to light) */ .theme-toggle::before {content: "\f042"; font-weight: 900;} /* fa-circle-half-stroke = auto */ html[data-theme-mode="light"] body .theme-toggle::before {content: "\e7c9";} /* fa-moon-star */ html[data-theme-mode="dark"] body .theme-toggle::before {content: "\e28f";} /* fa-sun-bright */ /* ------------------------------------------------------------------ */ /* 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 */ /* ------------------------------------------------------------------ */ /* text selection: black on gold, exactly like light mode (main.css uses var(--txt_black) which is remapped to light in dark mode) */ html[data-theme="dark"] body ::selection {background-color: var(--fsg_gold); color: #1D1D1B;} html[data-theme="dark"] body ::-moz-selection {background-color: var(--fsg_gold); color: #1D1D1B;} 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: flat surface — logo readability comes from the dark logo variants */ html[data-theme="dark"] body #site-header {background: var(--dm-bg-surface); 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: dark variants with lightened black tone (#1D1D1B -> #BFC3C8), red and gold stay untouched; swapped via content:url */ html[data-theme="dark"] body #topbox a#homelink img[src*="FSG-icon"] {content: url("/typo3conf/ext/fsg_sitepackage/Resources/Public/Icons/FSG-icon_dark.svg");} html[data-theme="dark"] body #topbox a#homelink img[src*="FSG_Logo_rgb"] {content: url("/typo3conf/ext/fsg_sitepackage/Resources/Public/Icons/FSG_Logo_rgb_dark.svg");} /* 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);} /* button-collection dropdown (Columns / States / Export menus): hardcoded white; it is appended to , so it is not covered by #maincol rules */ html[data-theme="dark"] body div.dt-button-collection {background-color: var(--dm-bg-raised); border-color: var(--border); color: var(--dm-txt); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);} html[data-theme="dark"] body div.dt-button-collection.fixed {background-color: var(--dm-bg-raised);} html[data-theme="dark"] body div.dt-button-collection .dt-button:hover:not(.disabled) {background: var(--dm-bg-hover);} html[data-theme="dark"] body div.dt-button-collection .dt-button.disabled {color: var(--dm-txt-2nd);} /* the transparent backdrop behind the open dropdown */ html[data-theme="dark"] body div.dt-button-background {background: rgba(0, 0, 0, 0.4);} /* 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);} /* radios/checkboxes: uniform bright checked state (FSG green) — some render nearly black on dark otherwise (e.g. gender radios in the volunteer form) */ html[data-theme="dark"] body input[type="radio"], html[data-theme="dark"] body input[type="checkbox"] {accent-color: var(--fsg_green);} /* volunteer registration: page style block paints custom radios (appearance: none) with per-value colors — the "black" checked states become light */ html[data-theme="dark"] body div.tx_frontendformslib-fe_users-gender div.radiobuttons input[type="radio"]:checked, html[data-theme="dark"] body #content .user-fsgregister-pi1 fieldset#step_5 div.radiobuttons input[type="radio"][value="3"]:checked, html[data-theme="dark"] body #content .user-fsgregister-pi1 fieldset#step_5 div.radiobuttons input[type="radio"][value="99"]:checked {background: var(--dm-txt) !important; border-color: var(--dm-txt) !important;} /* 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"], html[data-theme="dark"] body [style*="background:#f9f9f9"], html[data-theme="dark"] body [style*="background: #f9f9f9"], html[data-theme="dark"] body [style*="background-color: rgb(255, 255, 255)"] {background-color: var(--dm-bg-surface) !important; color: var(--dm-txt) !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"], /* bright named colors from the hotel assigned-users list (case-insensitive) */ html[data-theme="dark"] body [style*="background-color:Chartreuse" i], html[data-theme="dark"] body [style*="background-color:LightSteelBlue" i], html[data-theme="dark"] body [style*="background-color:Orange" i], html[data-theme="dark"] body [style*="background-color:Pink" i], html[data-theme="dark"] body [style*="background-color:WhiteSmoke" i], /* JS-set styles serialize lowercase with a space (e.g. hotel room grid) */ html[data-theme="dark"] body [style*="background-color: gold" i], html[data-theme="dark"] body [style*="background-color: lightskyblue" i], html[data-theme="dark"] body [style*="background-color: lightsteelblue" i], html[data-theme="dark"] body [style*="background-color: pink" i], html[data-theme="dark"] body [style*="background-color: plum" i], html[data-theme="dark"] body [style*="background-color: lime" i], html[data-theme="dark"] body [style*="background-color: lightblue" i], html[data-theme="dark"] body [style*="background-color:#e2e2e2"], /* design judge selection: light status colors on cells +