From 258c5d262fa4971d0df1d4d4f23c2b1f02ab93af Mon Sep 17 00:00:00 2001 From: albertlast Date: Tue, 11 Aug 2026 08:48:31 +0200 Subject: [PATCH 1/2] Gives the last hard-coded colours in index.css a token Wave 4 tokenised index.css area by area and left a remainder: 55 declarations that no area owned, scattered across the file. This takes those, so that every colour the default theme draws now resolves through variables.css. Most are one-offs - the forum title link, the current page number, the status words, the COPPA contact block, the error file viewer, the warning level bars. Three are not: the sheen gradients on raised controls, on their hover state and on the overlay surfaces are each shared by a long selector list spanning menus, quick buttons, popups and post options, so they are named for what they are rather than for any one component that uses them. Every token is seeded with the literal it takes over from, so this is not meant to change what the forum looks like, and does not. Verified by recording the computed color, background, background-image, border colours, box-shadow, outline and text-shadow of every element on twelve pages - the board index, a topic, the poster, the profile, the stats, help, search, the calendar, personal messages, the admin centre, its permission grid and its theme list - before and after: 4254 elements, zero differences. The one literal left is the diagonal stripe the progress bar draws over its fill, which is a translucent white texture rather than a colour. Signed-off-by: Mathias Alberts Signed-off-by: albertlast --- Themes/default/css/index.css | 116 +++++++++++++++---------------- Themes/default/css/variables.css | 101 +++++++++++++++++++++++++-- 2 files changed, 153 insertions(+), 64 deletions(-) diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 04c606a7f3..bcae359fee 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -150,7 +150,7 @@ strong, .strong { color: var(--strong-color); } .cat_bar strong { - color: #fff; + color: var(--catbar-strong-color); } em, .em { font-style: italic; @@ -238,14 +238,14 @@ body#help_popup { position: relative; top: -2px; padding: 0 4px; - background: linear-gradient(#f97b00,#884d00); - color: #fff; + background: var(--newposts-bg); + color: var(--newposts-color); font: 9px/15px verdana, sans-serif; border-radius: 2px; opacity: 0.8; } a.new_posts:visited { - color: #fff; + color: var(--newposts-color); } .new_posts:hover, .new_posts:focus { text-decoration: none; @@ -626,7 +626,7 @@ strong[id^='child_list_']::after { } .current_page { padding: 0 4px 0 2px; - color: #b46100; + color: var(--currentpage-color); font-family: verdana, sans-serif; font-weight: bold; } @@ -646,15 +646,15 @@ strong[id^='child_list_']::after { /* Calendar colors for birthdays, events and holidays */ .birthday { - color: #920ac4; + color: var(--birthday-color); } .event { - color: #078907; + color: var(--event-color); } .holiday > span.label { - color: #025dff; + color: var(--holiday-color); } .holiday_wrapper > span:first-of-type::before { content: '('; @@ -671,11 +671,11 @@ strong[id^='child_list_']::after { } .warn_moderate { - color: #ffa500; + color: var(--warnmoderate-color); } .warn_watch, .success { - color: green; + color: var(--success-color); } a.moderation_link, a.moderation_link:visited { @@ -818,17 +818,17 @@ img.sort, .sort { visibility: hidden; border-radius: 3px; outline: none !important; - border: 1px solid #bbb; + border: 1px solid var(--autosuggest-border-color); z-index: 100; } .auto_suggest_item { - background: #ddd; + background: var(--autosuggest-item-bg); padding: 1px 4px; } .auto_suggest_item_hover { - background: #888; + background: var(--autosuggest-item-bg_hover); cursor: pointer; - color: #eee; + color: var(--autosuggest-item-color_hover); padding: 1px 4px; } @@ -1147,7 +1147,7 @@ html[lang="el-GR"] .inline_mod_check { text-transform: capitalize; } .pagesection .button { - color: #346; + color: var(--pagesection-button-color); } /* .button is listed here for the border and the shadow; it overrides the colour again immediately below, so this one belongs to the quick buttons. */ @@ -1207,10 +1207,10 @@ html[lang="el-GR"] .inline_mod_check { /* Box-shadow only on this one. */ #wrapper { clear: both; - background: #fff; - border: 1px solid #b8b8b8; + background: var(--wrapper-bg); + border: 1px solid var(--wrapper-border-color); border-radius: 8px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14); + box-shadow: var(--wrapper-box-shadow); } /* Set maximum width limit for content. @@ -1291,7 +1291,7 @@ h1.forumtitle { flex: 1 1 auto; } h1.forumtitle a { - color: #a85400; + color: var(--forumtitle-link-color); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } /* Float these items to the right */ @@ -1910,16 +1910,16 @@ dl.register_form dd { .coppa_contact { padding: 4px; width: 32ex; - background: #fff; - color: #222; + background: var(--coppa-bg); + color: var(--coppa-color); margin-left: 5ex; - border: 1px solid #222; + border: 1px solid var(--coppa-border-color); } .valid_input { - background: #f5fff0; + background: var(--input-bg_valid); } .invalid_input { - background: #fff0f0; + background: var(--input-bg_invalid); } /* Styles for maintenance mode. @@ -1950,7 +1950,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { } .errorfile_table { - background: #f0f4f7; + background: var(--errorfile-bg); border-collapse: collapse; } .errorfile_table .file_line { @@ -1962,7 +1962,7 @@ tr.windowbg td, tr.bg td, .table_grid tr td { border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-width: 1px 0 1px 1px; - background: rgba(245, 141, 15, 0.2); + background: var(--errorfile-bg_current); } .generic_menu { @@ -2546,7 +2546,7 @@ dl { width: 35%; margin: 0 0 3px 0; font-weight: bold; - color: #444; + color: var(--profile-dt-color); } #detailedinfo dd, #tracking dd { width: 65%; @@ -2590,10 +2590,10 @@ dl { } .activity_stats li span { display: block; - border: 1px solid #666; + border: 1px solid var(--activitystats-border-color); border-left: none; border-right: none; - background: #eee; + background: var(--activitystats-bg); } .activity_stats li.last span { border-right: none; @@ -2629,7 +2629,7 @@ dl { padding: 5px 6px 1px 2px; font-size: 2.2em; font-weight: bold; - color: #3f3f3f; + color: var(--counter-color); float: left; } .topic_details { @@ -2640,7 +2640,7 @@ dl { } .list_posts { border-top: 1px solid #ddd; - box-shadow: 0 1px 0 #fff inset; + box-shadow: var(--listposts-box-shadow); padding-top: 1em; margin-top: 1em; margin-bottom: 1em; @@ -2742,7 +2742,7 @@ dl { float: left; } #pick_theme .selected { - background: #cddbe6; + background: var(--picktheme-selected-bg); } /* Signature preview */ @@ -2768,16 +2768,16 @@ dl { max-width: 250px; } .warning_level.none .bar { - background-color: #75da41; + background-color: var(--warninglevel-bg_none); } .warning_level.watched .bar { - background-color: #ffd800; + background-color: var(--warninglevel-bg_watched); } .warning_level.moderated .bar { - background-color: orange; + background-color: var(--warninglevel-bg_moderated); } .warning_level.muted .bar { - background-color: #f45d4c; + background-color: var(--warninglevel-bg_muted); } /* Styles for the statistics center. @@ -3098,7 +3098,7 @@ dl.addrules dt.floatleft { border: var(--popup-content-border-width) var(--popup-content-border-style) var(--popup-content-border-color); border-bottom: var(--popup-content-border-width) var(--popup-content-border-style) var(--popup-content-border-color_bottom); border-radius: 6px 6px 2px 2px; - box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); + box-shadow: var(--popup-content-box-shadow); } .popup_window.large .popup_content { max-height: 80vh; @@ -3840,8 +3840,8 @@ form#postmodify .roundframe { font-weight: bold; } #post_draft_options { - background: #fdfdfd; - border: 1px solid #aaa; + background: var(--draftoptions-bg); + border: 1px solid var(--draftoptions-border-color); border-left: 1px solid #bbb; border-top: none; border-radius: 0 0 4px 4px; @@ -3856,7 +3856,7 @@ form#postmodify .roundframe { border-top: none; /* Some people are OCD, like me. :P */ } #post_draft_options .settings strong { - color: #555; + color: var(--draftoptions-strong-color); } #post_confirm_buttons { display: flex; @@ -3934,16 +3934,16 @@ form#postmodify .roundframe { border-spacing: 1px; } .errorfile_table td { - background: #fbfbfb; + background: var(--errorfile-line-bg); } .errorfile_table .current { - background: #fbc6c6; + background: var(--errorfile-line-bg_current); } .errorfile_table .file_line.current { - background: #fb9090; + background: var(--errorfile-fileline-bg_current); } .errorfile_table .file_line { - background: #ececec; + background: var(--errorfile-fileline-bg); } /* General Classes */ @@ -4053,7 +4053,7 @@ h3.catbg .main_icons::before, h3.catbg .icon { } h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { background: none; - color: #555; + color: var(--titlebg-color); font-family: "Tahoma", sans-serif; font-weight: bold; overflow: hidden; @@ -4062,7 +4062,7 @@ h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg { } .titlebg a, .subbg a { background: none; - color: #555; + color: var(--titlebg-link-color); text-decoration: none; } .title_bar + .windowbg, .title_bar + .roundframe { @@ -4232,18 +4232,18 @@ h3.profile_hd::before, .quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus, .inline_mod_check, .popup_window, .post_options ul, .post_options ul a:hover, .post_options ul a:focus, .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus { - background: #fff; /* fallback for some browsers */ - background-image: linear-gradient(#e2e9f3 0%, #fff 70%); + background: var(--raised-bg); /* fallback for some browsers */ + background-image: var(--raised-bg-image); } /* Well some of them has different gradient effect on hover */ .button:hover, #search_form .button:hover, .quickbuttons li:hover { - background: #fff; - background-image: linear-gradient(to bottom, #fff 0%, #e2e9f3 70%); + background: var(--raised-bg_hover); + background-image: var(--raised-bg-image_hover); } /* If it fits I sits... */ .navigate_section ul, .popup_content, .up_contain { - background: #fff; - background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%); + background: var(--overlay-bg); + background-image: var(--overlay-bg-image); } /* Topic/Board follow-alert menu */ @@ -4259,7 +4259,7 @@ h3.profile_hd::before, } .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus { - border-color: #ddd; + border-color: var(--dropmenu-border-color_focus); } .dropmenu .viewport .overview span { font-size: 0.9em; @@ -4271,7 +4271,7 @@ h3.profile_hd::before, margin: -7px 0 15px 0; } #display_head p { - color: #959595; + color: var(--displayhead-color); } #display_head span { margin: -4px 0 0 0; @@ -4298,13 +4298,13 @@ h3.profile_hd::before, /* Messages that somehow need to attract the attention. */ .red, .meaction, .error, .alert, .warn_mute { - color: red; + color: var(--error-color); } .blue { - color: blue; + color: var(--blue-color); } .green { - color: green; + color: var(--green-color); } /* Adding some classes for generic usage and JS rules */ @@ -4486,7 +4486,7 @@ tr[id^='list_news_lists_'] textarea { } .videocontainer video { object-fit: contain; - background: black; + background: var(--video-bg); max-width: 100%; } diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index f82905f948..dd7b204ee9 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -45,6 +45,9 @@ --secondary-color-900: hsl(var(--secondary-color-hue), 97%, 46%); /** Layout **/ + --wrapper-bg: #fff; + --wrapper-border-color: #b8b8b8; + --wrapper-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14); --wrapper-width: 1200px; /** Footer **/ @@ -92,6 +95,7 @@ --dropmenu-border-color: transparent; --dropmenu-border-color_active: #f49a3a; --dropmenu-border-color_active_hover: #f49a3a; + --dropmenu-border-color_focus: #ddd; --dropmenu-border-color_hover: #4a6b8c; --dropmenu-border-radius: 4px; --dropmenu-border-style: solid; @@ -169,6 +173,8 @@ --input-bg_disabled: #eee; --input-bg_focus: #fff; --input-bg_hover: #fbfbfb; + --input-bg_invalid: #fff0f0; + --input-bg_valid: #f5fff0; --input-border-color: #bbb; --input-border-color_disabled: #b6b6b6; --input-border-color_focus: #7fb0d8; @@ -290,6 +296,7 @@ --catbar-color: #fff; --catbar-font-family: "Tahoma", sans-serif; --catbar-font-size: 1.1em; + --catbar-strong-color: #fff; --catbar-text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); --catbar-text-shadow_hover: -1px -1px 0 rgba(0, 0, 0, 0.4); @@ -506,6 +513,7 @@ --popup-content-border-color_bottom: #ddd; --popup-content-border-style: solid; --popup-content-border-width: 1px; + --popup-content-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2); /** Generic Lists **/ --listgrid-border-color: #aaa; @@ -632,20 +640,23 @@ --breadcrumb-link-text-shadow_hover: none; /** Calendar **/ - --calendar-th-bg: #e7eaef; - --calendar-today-bg: #fff; - --calendar-disabled-bg: #eee; + --birthday-color: #920ac4; + --calendar-birthday-bg: rgba(102, 0, 255, 0.1); + --calendar-birthday-bg_hover: rgba(153, 51, 255, 0.2); --calendar-day-bg_hover: rgba(97, 135, 166, 0.2); + --calendar-disabled-bg: #eee; --calendar-event-bg: rgba(30, 245, 20, 0.1); --calendar-event-bg_hover: rgba(30, 245, 20, 0.2); + --calendar-event-meta-color: #777; --calendar-holiday-bg: rgba(23, 110, 245, 0.1); --calendar-holiday-bg_hover: rgba(23, 110, 245, 0.2); - --calendar-birthday-bg: rgba(102, 0, 255, 0.1); - --calendar-birthday-bg_hover: rgba(153, 51, 255, 0.2); --calendar-link-color: #999; --calendar-link-color_hover: #555; + --calendar-th-bg: #e7eaef; --calendar-title-link-color: #555; - --calendar-event-meta-color: #777; + --calendar-today-bg: #fff; + --event-color: #078907; + --holiday-color: #025dff; /** Admin **/ --admin-announcement-border-color: #bf6900; @@ -676,4 +687,82 @@ --admin-smiley-border-color_selected: #ffb42d; --admin-table-caption-color: #000; --admin-table-grid-border-color: #ddd; + + /** Forum Title Link **/ + --forumtitle-link-color: #a85400; + + /** New Posts Badge **/ + --newposts-bg: linear-gradient(#f97b00,#884d00); + --newposts-color: #fff; + + /** Page Index **/ + --currentpage-color: #b46100; + --pagesection-button-color: #346; + + /** Status Text **/ + --blue-color: blue; + --error-color: red; + --green-color: green; + --success-color: green; + --warnmoderate-color: #ffa500; + + /** Raised Controls **/ + --raised-bg: #fff; + --raised-bg-image: linear-gradient(#e2e9f3 0%, #fff 70%); + --raised-bg_hover: #fff; + --raised-bg-image_hover: linear-gradient(to bottom, #fff 0%, #e2e9f3 70%); + + /** Overlay Surfaces **/ + --overlay-bg: #fff; + --overlay-bg-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%); + + /** Title and Sub Backgrounds **/ + --titlebg-color: #555; + --titlebg-link-color: #555; + + /** Auto Suggest **/ + --autosuggest-border-color: #bbb; + --autosuggest-item-bg: #ddd; + --autosuggest-item-bg_hover: #888; + --autosuggest-item-color_hover: #eee; + + /** Topic Display Head **/ + --displayhead-color: #959595; + + /** Draft Options **/ + --draftoptions-bg: #fdfdfd; + --draftoptions-border-color: #aaa; + --draftoptions-strong-color: #555; + + /** Profile **/ + --activitystats-bg: #eee; + --activitystats-border-color: #666; + --counter-color: #3f3f3f; + --listposts-box-shadow: 0 1px 0 #fff inset; + --profile-dt-color: #444; + + /** Warning Level Bars **/ + --warninglevel-bg_moderated: orange; + --warninglevel-bg_muted: #f45d4c; + --warninglevel-bg_none: #75da41; + --warninglevel-bg_watched: #ffd800; + + /** COPPA Contact **/ + --coppa-bg: #fff; + --coppa-border-color: #222; + --coppa-color: #222; + + /** Error File Viewer **/ + --errorfile-bg: #f0f4f7; + --errorfile-bg_current: rgba(245, 141, 15, 0.2); + --errorfile-fileline-bg: #ececec; + --errorfile-fileline-bg_current: #fb9090; + --errorfile-line-bg: #fbfbfb; + --errorfile-line-bg_current: #fbc6c6; + + /** Theme Picker **/ + --picktheme-selected-bg: #cddbe6; + + /** Embedded Video **/ + --video-bg: black; } From 5f8261b4b3dff9f43e089937a3ee6620950a3db0 Mon Sep 17 00:00:00 2001 From: albertlast Date: Tue, 11 Aug 2026 09:03:02 +0200 Subject: [PATCH 2/2] Gives the default theme a dark mode The colour mode plumbing has been in 3.0 since Alpha: Theme.php resolves the mode, Themes.template.php and ThemeOptions.php offer it to the admin and the member, index.template.php writes it into data-mode, and dark.css has sat in the theme as a placeholder. None of it has ever run. Turning the flag on was not enough, because the feature is broken in four places rather than one. loadMode() had no callers. It is the method that resolves the mode and loads dark.css, and nothing anywhere invoked it, so data-mode was never emitted and the stylesheet was never asked for. It is now called beside loadVariant(), which is its sibling and is read by the same line of the template. The 'system' mode lost the very thing that makes it 'system'. That mode works by loading dark.css with a (prefers-color-scheme: dark) media attribute, but attributes are only printed for files served on their own - loadCSSFile() defaults to minimizing, and a file folded into the bundle loses them. The browser was never asked, so 'system' would have meant 'always dark'. That mode now opts out of the bundle; 'light' and 'dark' carry no attribute and still share one cached file. Saving the chosen mode to a member's profile was fatal. Db::insert() wants a list of rows and was handed a single flat one, which is a critical error rather than a warning outside backward compatibility mode, so the first time a logged in member chose a mode the page died. loadVariant() has the identical defect three lines further down; it is left alone here because this branch neither enables nor exercises variants, and shipping an unverified fix is worse than recording a known one. dark.css itself is written against release-3.0's own tokens rather than ported. The snapshot on #7933 could not be used: of its 197 overrides only 84 name a token that exists here, while 213 colour-bearing tokens here have no value in it. It overrides 243 tokens and restates no rules, all written against twelve values declared at the top of the file, so the way to review it is to agree those and then check each component reached for the right one. The ramps are deliberately untouched, so a variant still re-tints the forum by moving --primary-color-hue and dark mode moves with it. Verified on a running forum. Light mode is unchanged: the computed colours of 4254 elements over twelve pages are identical with the file present and absent. All three modes emit the right markup and the right stylesheets, including the media attribute on 'system' alone. Eighteen pages were swept in both modes for text that lands on a background too close to it; dark mode has nineteen elements below the AA ratio against light mode's hundred and thirty-six, and both dark causes sit outside the theme - the bundled coloris colour picker, which carries no tokens at all, and the Administrator group's online_color, which is data. No errors were logged. Signed-off-by: Mathias Alberts Signed-off-by: albertlast --- Sources/Theme.php | 14 +- Themes/default/css/dark.css | 547 +++++++++++++++++++++++++++++- Themes/default/index.template.php | 2 +- 3 files changed, 542 insertions(+), 21 deletions(-) diff --git a/Sources/Theme.php b/Sources/Theme.php index a511d3c264..39431613d3 100644 --- a/Sources/Theme.php +++ b/Sources/Theme.php @@ -220,6 +220,8 @@ public function initialize(): void $this->loadCss(); + $this->loadMode(); + $this->loadVariant(); Utils::$context['tabindex'] = 1; @@ -2208,7 +2210,7 @@ protected function loadMode(): void 'replace', '{db_prefix}themes', ['id_theme' => 'int', 'id_member' => 'int', 'variable' => 'string-255', 'value' => 'string-65534'], - [self::$current->settings['theme_id'], User::$me->id, 'theme_colormode', $_SESSION['theme_colormode']], + [[self::$current->settings['theme_id'], User::$me->id, 'theme_colormode', $_SESSION['theme_colormode']]], ['id_theme', 'id_member', 'variable'], ); } @@ -2224,7 +2226,15 @@ protected function loadMode(): void Utils::$context['theme_colormode'] = !empty($this->settings['default_colormode']) && \in_array($this->settings['default_colormode'], $this->settings['theme_colormodes']) ? $this->settings['default_colormode'] : $this->settings['theme_colormodes'][0]; } - self::loadCSSFile('dark.css', ['order_pos' => 2, 'attributes' => (Utils::$context['theme_colormode'] == 'system' ? ['media' => '(prefers-color-scheme: dark)'] : [])], 'smf_dark'); + // In 'system' mode the media attribute is the whole mechanism: it is + // what asks the browser rather than the member. But attributes are + // only printed for files served on their own - a file folded into + // the minified bundle loses them - so this is the one mode that has + // to stay out of it. The other two carry no attribute and bundle as + // usual, which also lets them share one cached file. + $system_mode = Utils::$context['theme_colormode'] == 'system'; + + self::loadCSSFile('dark.css', ['minimize' => !$system_mode, 'order_pos' => 2, 'attributes' => ($system_mode ? ['media' => '(prefers-color-scheme: dark)'] : [])], 'smf_dark'); } } diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index e0f1ac8465..2aeb3fcef7 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -1,23 +1,534 @@ /* Dark colour mode for the default theme. /* -/* Deliberately empty for now. This file is the placeholder the dark mode work -/* lands in; a later pull request fills it with the token overrides. +/* Nothing here restates a rule. Every declaration overrides a token that +/* variables.css already defines, so the cascade is unchanged and a component +/* that gains a token later picks its dark value up here rather than growing a +/* second copy of its rules. /* -/* Nothing loads it yet. Theme.php only calls loadCSSFile('dark.css', ...) when -/* settings['has_dark_mode'] is set, and index.template.php still sets that to -/* false, so the switch stays off until there is something here to switch to. +/* Both attribute values are required on every block. Theme.php loads this file +/* in every colour mode once dark mode is available, and only attaches a +/* (prefers-color-scheme: dark) media attribute when the mode is "system", while +/* index.template.php writes the chosen mode straight into data-mode. So in +/* "light" the selector is the only thing keeping these rules out, and in +/* "system" the media query has already decided whether the file applies at all. +/* Dropping the "system" alternative would mean that mode never gets dark +/* styling, because the file loads, the media query matches, and then nothing +/* selects. /* -/* When it is filled in, override the tokens in variables.css rather than -/* restating whole rules, and scope every block to both attribute values: +/* The primary and secondary ramps are deliberately left alone. They carry the +/* theme's identity and a variant re-tints the forum by moving +/* --primary-color-hue, which has to keep working here. Where a token pointed at +/* the dark end of a ramp because it was drawn on a light surface, the override +/* below points it at the light end instead; the ramp itself keeps meaning what +/* its name says. /* -/* :root[data-mode="dark"], -/* :root[data-mode="system"] { ... } -/* -/* Both are required. Theme.php loads this file in every colour mode once dark -/* mode is available, and only attaches a (prefers-color-scheme: dark) media -/* attribute when the mode is "system"; index.template.php writes the mode -/* straight into data-mode. So in "light" the selector is the only thing keeping -/* these rules out, and in "system" the media query has already decided whether -/* the file applies at all. Dropping the "system" alternative would mean that -/* mode never gets dark styling, because the file loads, the media query -/* matches, and then nothing selects. */ +/* The scale at the top exists only in this file. It is the small set of +/* decisions everything else is written against, so the way to review this is to +/* agree those values first and then check that each component reached for the +/* right one. */ +:root[data-mode="dark"], +:root[data-mode="system"] { + + /* The surfaces, from the page behind everything up to the topmost thing + /* that floats above it, then the two hairline weights, the three text + /* weights and the link colours. All tinted with the theme's own hue rather + /* than neutral grey, so a variant moves dark mode with it. */ + --dark-bg-0: hsl(var(--primary-color-hue), 24%, 8%); + --dark-bg-1: hsl(var(--primary-color-hue), 20%, 11%); + --dark-bg-2: hsl(var(--primary-color-hue), 16%, 15%); + --dark-bg-3: hsl(var(--primary-color-hue), 14%, 19%); + --dark-bg-4: hsl(var(--primary-color-hue), 13%, 24%); + --dark-line: hsl(var(--primary-color-hue), 12%, 26%); + --dark-line-strong: hsl(var(--primary-color-hue), 12%, 36%); + --dark-ink: hsl(var(--primary-color-hue), 10%, 84%); + --dark-ink-dim: hsl(var(--primary-color-hue), 8%, 62%); + --dark-ink-bright: hsl(var(--primary-color-hue), 14%, 96%); + --dark-accent: hsl(var(--primary-color-hue), 48%, 72%); + --dark-accent-strong: hsl(var(--primary-color-hue), 60%, 82%); + + /** Layout **/ + --wrapper-bg: var(--dark-bg-2); + --wrapper-border-color: var(--dark-line); + --wrapper-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); + + /** Footer **/ + --footer-bg: var(--dark-bg-0); + --footer-color: var(--dark-ink); + + /** Footer Links **/ + --footer-link-color: var(--dark-ink-bright); + --footer-link-color_hover: var(--dark-accent-strong); + + /** Top Bar **/ + --topsection-bg: linear-gradient(hsl(var(--primary-color-hue), 20%, 15%) 0%, hsl(var(--primary-color-hue), 20%, 11%) 70%); + --topsection-border-color: var(--dark-line); + --topsection-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + + /** Main Menu **/ + --mainmenu-bg: linear-gradient(hsl(var(--primary-color-hue), 20%, 15%) 0%, hsl(var(--primary-color-hue), 20%, 11%) 70%); + --mainmenu-border-color: var(--dark-line); + + /** Drop Menu Buttons **/ + /* The active button keeps the theme's orange. It is the one place the menu + /* says "you are here", and a dark-on-dark version of it says nothing. */ + --dropmenu-bg_active: linear-gradient(#e09000, #c47c00); + --dropmenu-bg_active_hover: #f0a000; + --dropmenu-bg_hover: hsl(var(--primary-color-hue), 28%, 26%); + --dropmenu-border-color_active: #c9802f; + --dropmenu-border-color_active_hover: #c9802f; + --dropmenu-border-color_focus: var(--dark-line-strong); + --dropmenu-border-color_hover: hsl(var(--primary-color-hue), 25%, 32%); + --dropmenu-box-shadow_active_hover: 0 5px 5px rgba(255, 255, 255, 0.12) inset; + --dropmenu-box-shadow_hover: 0 4px 4px rgba(255, 255, 255, 0.06) inset; + --dropmenu-strong-color: var(--dark-ink); + + /** Drop Menu Notification Counts **/ + --amt-bg: hsl(var(--primary-color-hue), 35%, 38%); + + /** Drop Menu Submenus **/ + --submenu-bg: var(--dark-bg-3); + --submenu-border-color: var(--dark-line-strong); + --submenu-border-color_left: var(--dark-line); + --submenu-border-color_top: var(--dark-line); + --submenu-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6); + + /** Drop Menu Submenu Items **/ + --submenu-item-border-color_hover: var(--dark-line-strong); + --submenu-item-border-color_hover_top: var(--dark-line-strong); + --submenu-item-color: var(--dark-accent); + --submenu-item-color_hover: var(--dark-ink-bright); + + /** HTML **/ + --html-bg: var(--dark-bg-0); + + /** Body **/ + --body-bg: var(--dark-bg-1); + --body-color: var(--dark-ink); + + /** Body Links **/ + --body-link-color: var(--dark-accent); + + /** Strong **/ + --strong-color: var(--dark-ink-bright); + + /** Headings **/ + --heading-color: var(--dark-ink-bright); + + /** Selection **/ + --selection-bg: hsl(var(--primary-color-hue), 60%, 35%); + --selection-color: hsl(0, 0%, 98%); + + /** Horizontal Rule **/ + --horizontalrule-bg: var(--dark-line); + --horizontalrule-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; + + /** Inputs **/ + --input-bg: hsl(var(--primary-color-hue), 16%, 14%); + --input-bg_disabled: hsl(var(--primary-color-hue), 12%, 17%); + --input-bg_focus: hsl(var(--primary-color-hue), 16%, 16%); + --input-bg_hover: hsl(var(--primary-color-hue), 16%, 16%); + --input-bg_invalid: hsl(0, 25%, 16%); + --input-bg_valid: hsl(110, 22%, 14%); + --input-border-color: var(--dark-line-strong); + --input-border-color_disabled: var(--dark-line); + --input-border-color_focus: hsl(var(--primary-color-hue), 50%, 55%); + --input-border-color_hover: hsl(var(--primary-color-hue), 30%, 45%); + --input-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.35) inset; + --input-color: var(--dark-ink-bright); + --input-color_disabled: var(--dark-ink-dim); + + /** Fieldsets **/ + --fieldset-border-color: var(--dark-line); + --fieldset-legend-color: var(--dark-ink); + + /** Buttons **/ + /* The border is a four-sided bevel: light on the top and left, dark on the + /* bottom and right, and the hover state swaps them to press the button in. + /* Dark mode narrows the range rather than reversing it, because a bevel lit + /* from the same side is what keeps the two states telling apart. */ + --button-bg_active: hsl(var(--primary-color-hue), 32%, 32%); + --button-border-color: hsl(var(--primary-color-hue), 10%, 30%) hsl(var(--primary-color-hue), 10%, 20%) hsl(var(--primary-color-hue), 10%, 16%) hsl(var(--primary-color-hue), 10%, 30%); + --button-border-color_active: hsl(180, 20%, 35%); + --button-border-color_hover: hsl(var(--primary-color-hue), 10%, 16%) hsl(var(--primary-color-hue), 10%, 30%) hsl(var(--primary-color-hue), 10%, 30%) hsl(var(--primary-color-hue), 10%, 20%); + --button-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + --button-box-shadow_hover: -1px -1px 2px rgba(0, 0, 0, 0.6), -1px -2px 4px rgba(255, 255, 255, 0.05) inset; + --button-color: var(--dark-ink); + --button-color_hover: #e08a1f; + + /** Quick Buttons **/ + --quickbutton-box-shadow_focus: 0 0 4px hsl(var(--primary-color-hue), 60%, 60%); + --quickbutton-color: var(--dark-ink); + --quickbutton-color_hover: var(--dark-ink-bright); + + /** Post Options Drop Down **/ + --postoptions-bg: var(--dark-bg-3); + --postoptions-border-color: var(--dark-line-strong); + --postoptions-border-color_left: var(--dark-line-strong); + --postoptions-border-color_top: var(--dark-line); + --postoptions-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5); + + /** Post Options Drop Down Items **/ + --postoptions-item-border-color_hover: var(--dark-line-strong); + + /** Posts **/ + --postbg-border-color: hsl(var(--primary-color-hue), 10%, 30%); + --topiccontainer-border-color: rgba(255, 255, 255, 0.1); + + /* The hairline above each section inside a post. The light theme draws it as + /* a grey line with a white highlight under it; here the highlight is what + /* the surface reflects, so it drops to a hint. */ + --postsection-border-color: hsl(var(--primary-color-hue), 10%, 26%); + --postsection-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; + + /** Posts Awaiting Approval **/ + --approvebg-bg: hsl(0, 25%, 16%); + --approvebg-color: var(--dark-ink); + --approvebg2-bg: hsl(0, 20%, 19%); + --approvebg2-color: var(--dark-ink); + + /** Post Author **/ + --poster-name-color: #f0913a; + --poster-online-color: #f0913a; + + /** Post Info Line **/ + --pagenumber-color: #d99a5c; + --postinfo-link-color: #d99a5c; + --postinfo-modified-color: var(--dark-ink-dim); + --subjecttitle-link-color: var(--dark-ink-bright); + + /** Post Edit History **/ + --edithistory-bg: var(--dark-bg-2); + --edithistory-border-color: var(--dark-line); + --edithistory-item-border-color: var(--dark-line); + + /** Bump Notice **/ + --bumpnotice-border-color: var(--dark-line); + + /** Cat Bar **/ + --catbar-bg: hsl(var(--primary-color-hue), 30%, 22%); + --catbar-border-color: var(--dark-line-strong); + --catbar-box-shadow: 0 16px 20px rgba(255, 255, 255, 0.05) inset; + --catbar-color: var(--dark-ink-bright); + --catbar-strong-color: var(--dark-ink-bright); + + /** Title Bar **/ + --titlebar-bg: var(--dark-bg-3); + --titlebar-border-color: #e08600 var(--dark-line) #a75c00 var(--dark-line); + --titlebar-color: var(--dark-ink); + + /** Title and Sub Backgrounds **/ + --titlebg-color: var(--dark-ink); + --titlebg-link-color: var(--dark-ink); + + /** Sub Bar **/ + --subbar-border-color: var(--dark-line); + --subbar-box-shadow: 0 -1px 0 hsl(var(--primary-color-hue), 10%, 30%) inset; + + /** Round Frame **/ + --roundframe-bg: hsl(var(--primary-color-hue), 16%, 13%); + --roundframe-border-color: var(--dark-line); + --roundframe-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.4); + + /** Information **/ + --information-bg: hsl(var(--primary-color-hue), 16%, 13%); + --information-border-color: var(--dark-line); + + /** Windowbg **/ + /* The last seven are the message index row states. They have to stay + /* distinguishable from each other and from a plain row, which is why they + /* keep their own hues instead of collapsing onto the surface scale. */ + --window-bg: var(--dark-bg-3); + --window-bg_hover: var(--dark-bg-4); + --window-border-color: var(--dark-line); + --window-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.4); + --window-odd-bg: hsl(var(--primary-color-hue), 15%, 16%); + --window-target-bg: hsl(56, 25%, 18%); + --window-locked-bg: hsl(var(--primary-color-hue), 10%, 18%); + --window-sticky-bg: hsl(var(--primary-color-hue), 22%, 22%); + --window-stickylocked-bg: hsl(22, 18%, 19%); + --window-approvetopic-bg: hsl(22, 35%, 25%); + --window-approvepost-bg: hsl(0, 30%, 22%); + + /** Error Box **/ + --errorbox-bg: hsl(0, 30%, 15%); + --errorbox-border-color: #d9455a; + + /** Notice Box **/ + --noticebox-bg: hsl(48, 30%, 16%); + --noticebox-border-color: #c9a41c; + --noticebox-color: var(--dark-ink); + + /** Info Box **/ + --infobox-bg: hsl(120, 22%, 15%); + --infobox-border-color: #3f9e4d; + --infobox-color: var(--dark-ink); + + /** Desc Box **/ + --descbox-border-color: var(--dark-line); + + /** Generic Bar **/ + /* The label is centred over the whole bar, so it crosses both the filled + /* part and the empty track behind it. In the light theme both are pale and + /* dark text works over each; here they are at opposite ends, so the text + /* goes light and the shadow it already carried turns dark to hold it up over + /* the bright fill. This is the one token whose dark value is not the + /* inversion of its light one. */ + --genericbar-bg: var(--dark-bg-3); + --genericbar-border-color: var(--dark-line); + --genericbar-color: hsl(0, 0%, 94%); + --genericbar-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + + /** Progress Bar **/ + --progressbar-color: hsl(0, 0%, 98%); + + /** Quotes **/ + --quote-bg: hsl(var(--primary-color-hue), 20%, 17%); + --quote-alternate-bg: hsl(var(--primary-color-hue), 16%, 20%); + --quote-border-color: hsl(var(--primary-color-hue), 12%, 24%) hsl(var(--primary-color-hue), 12%, 32%); + --quote-cite-border-color: rgba(255, 255, 255, 0.12); + + /** Code Blocks **/ + --code-bg: hsl(var(--primary-color-hue), 14%, 11%); + --code-border-color: hsl(var(--primary-color-hue), 12%, 30%) hsl(var(--primary-color-hue), 12%, 22%) hsl(var(--primary-color-hue), 12%, 34%); + + /** BBC Tags **/ + --bbc-cite-color: var(--dark-ink-dim); + --bbc-details-border-color: var(--dark-line-strong); + --bbc-header-color: var(--dark-ink); + --bbc-spoiler-outline-color: hsl(var(--primary-color-hue), 45%, 55%); + --bbc-table-border-color: var(--dark-line); + --bbc-tt-bg: rgba(255, 255, 255, 0.1); + + /** BBC Links **/ + --bbc-link-border-color: hsl(var(--primary-color-hue), 20%, 35%); + --bbc-link-border-color_hover: var(--dark-accent); + + /** AJAX Notification Bar **/ + --ajaxinprogress-bg: var(--dark-bg-3); + + /** Popups **/ + --popup-bg: rgba(0, 0, 0, 0.65); + --popup-window-border-color: var(--dark-line-strong); + --popup-window-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); + --popup-heading-color: #e59440; + --popup-content-color: var(--dark-ink); + + /** Board Index **/ + --boardindex-border-color: var(--dark-line); + --boardindex-subject-color: #e0913f; + + /** Board Picker Lists **/ + --boardslist-border-color: var(--dark-line); + --boardslist-border-color_hover: var(--dark-accent); + + /** Info Center **/ + --infocenter-row-border-color: var(--dark-line); + --infocenter-time-color: var(--dark-ink-dim); + + /** Help Pages **/ + --helpmain-border-color: var(--dark-line); + --helpmain-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.4); + + /** Tooltips **/ + --tooltip-bg: var(--dark-bg-4); + --tooltip-border-color: var(--dark-line-strong); + --tooltip-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3) inset; + --tooltip-color: var(--dark-ink); + + /** Popup Content **/ + --popup-content-border-color: var(--dark-line-strong); + --popup-content-border-color_bottom: var(--dark-line); + --popup-content-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.05); + + /** Generic Lists **/ + --listgrid-border-color: var(--dark-line-strong); + + /** Alternating Rows **/ + --alternative-bg: hsl(var(--primary-color-hue), 12%, 16%); + --alternative2-bg: hsl(var(--primary-color-hue), 12%, 19%); + --stripes-bg_even: hsl(var(--primary-color-hue), 12%, 16%); + --stripes-bg_odd: hsl(var(--primary-color-hue), 14%, 13%); + + /** Two Factor Authentication Code **/ + --tfacode-bg: hsl(var(--primary-color-hue), 30%, 22%); + + /** Backtraces **/ + --backtrace-border-color: var(--dark-line); + + /* Both of these are laid over the text they mark, so they stay the colours + /* they were and only lose the alpha they no longer need to punch through. */ + /** Diff Output **/ + --diff-bg_added: rgba(0, 255, 0, 0.2); + --diff-bg_removed: rgba(255, 0, 0, 0.22); + + /** Collapse and Expand Toggles **/ + --toggle-bg: var(--dark-bg-3); + --toggle-bg_hover: hsl(var(--primary-color-hue), 25%, 28%); + --toggle-border-color: var(--dark-line); + --toggle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.05) inset, 0 -5px 4px rgba(0, 0, 0, 0.2) inset; + --toggle-box-shadow_hover: 0 1px 2px rgba(0, 0, 0, 0.5) inset; + + /** Message Icon Picker **/ + --iconlist-bg: var(--dark-bg-3); + --iconlist-border-color: var(--dark-line-strong); + --iconlist-item-bg_hover: hsl(var(--primary-color-hue), 25%, 26%); + --iconlist-item-border-color: var(--dark-bg-3); + --iconlist-item-border-color_hover: var(--dark-ink-dim); + + /** Online and Offline Dots **/ + --onoff-bg_off: hsl(0, 3%, 42%); + --onoff-bg_on: #6fce46; + --onoff-border-color_off: hsl(0, 3%, 34%); + --onoff-border-color_on: #5bb038; + + /** Personal Message Capacity Bar **/ + --capacitybar-bg: var(--dark-bg-3); + --capacitybar-border-color: var(--dark-line-strong); + --capacitybar-inner-bg_empty: #5e9a55; + --capacitybar-inner-bg_filled: #c98f0a; + --capacitybar-inner-bg_full: #c81616; + + /** Personal Messages **/ + --pmrules-label-color: var(--dark-ink); + --unreadpm-bg: hsl(120, 20%, 16%); + --notifylist-border-color: var(--dark-line); + --notifylist-item-bg_hover: var(--dark-bg-3); + + /** Search Highlight **/ + --searchhighlight-color: #ff9d4d; + + /** Moderation Link **/ + --moderationlink-bg: #d98a00; + + /** Navigate Section **/ + --navigatesection-bg: var(--dark-bg-2); + --navigatesection-border-color: var(--dark-line); + --navigatesection-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.04) inset; + + /** Breadcrumb **/ + --breadcrumb-box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.4); + --breadcrumb-color: var(--dark-ink); + + /** Breadcrumb Divider **/ + --breadcrumb-divider-color: hsl(206, 45%, 65%); + + /** Breadcrumb Links **/ + --breadcrumb-link-color: var(--primary-color-200); + --breadcrumb-link-color_active: hsl(213, 60%, 72%); + --breadcrumb-link-color_hover: var(--primary-color-100); + + /** Calendar **/ + --calendar-th-bg: var(--dark-bg-3); + --calendar-today-bg: hsl(var(--primary-color-hue), 20%, 20%); + --calendar-disabled-bg: hsl(var(--primary-color-hue), 10%, 12%); + --calendar-day-bg_hover: rgba(120, 165, 205, 0.18); + --calendar-event-bg: rgba(30, 245, 20, 0.12); + --calendar-event-bg_hover: rgba(30, 245, 20, 0.22); + --calendar-holiday-bg: rgba(23, 110, 245, 0.16); + --calendar-holiday-bg_hover: rgba(23, 110, 245, 0.28); + --calendar-birthday-bg: rgba(153, 51, 255, 0.16); + --calendar-birthday-bg_hover: rgba(153, 51, 255, 0.28); + --calendar-link-color: var(--dark-ink-dim); + --calendar-link-color_hover: var(--dark-ink-bright); + --calendar-title-link-color: var(--dark-accent); + --calendar-event-meta-color: var(--dark-ink-dim); + --birthday-color: #c98ae8; + --event-color: #5fc45f; + --holiday-color: #6aa8ff; + + /** Forum Title Link **/ + --forumtitle-link-color: #e0913f; + + /** Page Index **/ + --currentpage-color: #e2953f; + --pagesection-button-color: var(--dark-accent); + + /* The words a message is marked with. Each keeps its hue, because the hue is + /* the meaning, and only gains the lightness it needs to sit on a dark + /* surface - the light theme's pure red, green and blue are all but + /* unreadable there. */ + /** Status Text **/ + --blue-color: #6aa8ff; + --error-color: #ff6b6b; + --green-color: #5fc45f; + --success-color: #5fc45f; + --warnmoderate-color: #ffb733; + + /** Raised Controls **/ + --raised-bg: hsl(var(--primary-color-hue), 18%, 17%); + --raised-bg-image: linear-gradient(hsl(var(--primary-color-hue), 18%, 21%) 0%, hsl(var(--primary-color-hue), 18%, 16%) 70%); + --raised-bg_hover: hsl(var(--primary-color-hue), 20%, 22%); + --raised-bg-image_hover: linear-gradient(to bottom, hsl(var(--primary-color-hue), 20%, 24%) 0%, hsl(var(--primary-color-hue), 20%, 18%) 70%); + + /** Overlay Surfaces **/ + --overlay-bg: var(--dark-bg-3); + --overlay-bg-image: linear-gradient(to bottom, hsl(var(--primary-color-hue), 14%, 20%) 0%, hsl(var(--primary-color-hue), 14%, 17%) 95%); + + /** Auto Suggest **/ + --autosuggest-border-color: var(--dark-line-strong); + --autosuggest-item-bg: var(--dark-bg-3); + --autosuggest-item-bg_hover: hsl(var(--primary-color-hue), 25%, 32%); + --autosuggest-item-color_hover: var(--dark-ink-bright); + + /** Topic Display Head **/ + --displayhead-color: var(--dark-ink-dim); + + /** Draft Options **/ + --draftoptions-bg: var(--dark-bg-2); + --draftoptions-border-color: var(--dark-line-strong); + --draftoptions-strong-color: var(--dark-ink); + + /** Profile **/ + --activitystats-bg: var(--dark-bg-3); + --activitystats-border-color: var(--dark-line-strong); + --counter-color: var(--dark-ink); + --listposts-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; + --profile-dt-color: var(--dark-ink-bright); + + /** COPPA Contact **/ + --coppa-bg: var(--dark-bg-2); + --coppa-border-color: var(--dark-line-strong); + --coppa-color: var(--dark-ink); + + /** Error File Viewer **/ + --errorfile-bg: var(--dark-bg-2); + --errorfile-fileline-bg: hsl(var(--primary-color-hue), 10%, 20%); + --errorfile-fileline-bg_current: hsl(0, 40%, 32%); + --errorfile-line-bg: hsl(var(--primary-color-hue), 14%, 14%); + --errorfile-line-bg_current: hsl(0, 28%, 24%); + + /** Theme Picker **/ + --picktheme-selected-bg: hsl(var(--primary-color-hue), 28%, 24%); + + /** Admin **/ + /* The permission grid is the one place a background alone carries the + /* meaning - deny, allow, custom, unchanged - so those six keep their hues + /* and only lose their lightness. */ + --admin-announcement-border-color: #d67e1a; + --admin-announcement-link-color: #e59440; + --admin-announcement-separator-color: var(--dark-line); + --admin-board-bg_hover: hsl(var(--primary-color-hue), 28%, 24%); + --admin-board-group-border-color: var(--dark-line-strong); + --admin-css-preview-border-color: var(--dark-line-strong); + --admin-denyboard-bg_hover: hsl(var(--primary-color-hue), 12%, 22%); + --admin-edit-history-border-color: var(--dark-line); + --admin-group-legend-bg: var(--dark-bg-3); + --admin-group-legend-border-color: var(--dark-line); + --admin-highlight-bg: hsl(var(--primary-color-hue), 30%, 24%); + --admin-legend-color: var(--dark-ink-bright); + --admin-moderation-note-border-color: var(--dark-line); + --admin-package-border-color: var(--dark-line); + --admin-perm-boards-border-color: var(--dark-line); + --admin-perm-custom-bg: hsl(90, 6%, 24%); + --admin-perm-execute-bg: hsl(30, 30%, 22%); + --admin-perm-groups-bg: var(--dark-bg-2); + --admin-perm-no-change-bg: hsl(var(--primary-color-hue), 8%, 18%); + --admin-perm-read-bg: hsl(100, 25%, 18%); + --admin-perm-writable-bg: hsl(0, 30%, 24%); + --admin-recycle-board-bg: hsl(180, 15%, 17%); + --admin-redirect-board-bg: hsl(60, 15%, 17%); + --admin-search-result-border-color: var(--dark-line); + --admin-smiley-border-color_hover: hsl(var(--primary-color-hue), 40%, 50%); + --admin-table-caption-color: var(--dark-ink-bright); + --admin-table-grid-border-color: var(--dark-line); +} diff --git a/Themes/default/index.template.php b/Themes/default/index.template.php index 7128c0e092..092293da65 100644 --- a/Themes/default/index.template.php +++ b/Themes/default/index.template.php @@ -64,7 +64,7 @@ function template_init() * theme with dark mode. This means the index.css file should * always contain the light colors. */ - Theme::$current->settings['has_dark_mode'] = false; + Theme::$current->settings['has_dark_mode'] = true; /* * Define the theme variants. Each variant has its own CSS file.