From 522d70bdf667b4096b2025afe993f37818c6522e Mon Sep 17 00:00:00 2001 From: albertlast Date: Sun, 23 Aug 2026 23:13:12 +0200 Subject: [PATCH] Reaches the last colours the colour mode could not Two kinds of value were still out of the dark mode's reach, and neither was visible to the sweep that tokenised the rest of the theme. The first is a border written as a shorthand. That sweep matched `border` and `border-*-color`, so a `border-bottom: 1px solid #bbb` went straight past it. Seventeen of those were left, across index.css, attachments.css, responsive.css, profile.css and the two right-to-left sheets: the hairline under the header, the one above a post list, the dotted rule between attachment previews, the drop zone's hover outline, the mobile notification list, and the week grid separators. Each is now a token holding the literal it replaced. The second is subtler. atwho.css writes every one of its nineteen custom properties with a fallback - `var(--mentions-bg, #fff)` - so the mentions list has never looked wrong and nothing flagged it. But a token that is never declared cannot be overridden either, which is exactly what kept that list white in dark mode. Declaring them, each from the fallback it is written with, is the whole fix; atwho.css itself is untouched, so it keeps working if a theme drops variables.css. The one literal deliberately left is the diagonal stripe over a progress bar's fill, which is a translucent white texture rather than a colour. Light mode is unchanged: computed colours, border widths and styles, shadows, sizes, weights and radii for every element over fourteen pages, before and after - 4473 elements, no differences. In dark mode the same properties now resolve against the scale rather than staying at their light values. Signed-off-by: Mathias Alberts Signed-off-by: albertlast --- Themes/default/css/attachments.css | 6 ++--- Themes/default/css/calendar.rtl.css | 8 +++--- Themes/default/css/dark.css | 23 ++++++++++++++++ Themes/default/css/index.css | 14 +++++----- Themes/default/css/profile.css | 2 +- Themes/default/css/responsive.css | 4 +-- Themes/default/css/rtl.css | 2 +- Themes/default/css/variables.css | 42 +++++++++++++++++++++++++++++ 8 files changed, 83 insertions(+), 18 deletions(-) diff --git a/Themes/default/css/attachments.css b/Themes/default/css/attachments.css index 8e46edd4c5e..211b2bb31e4 100644 --- a/Themes/default/css/attachments.css +++ b/Themes/default/css/attachments.css @@ -51,8 +51,8 @@ div#post_attachments_area.roundframe { box-shadow: none; } #post_attachments_area #postAttachment .attached { - border-right: 1px dotted #ddd; - border-top: 1px dotted #ddd; + border-right: 1px dotted var(--attachment-item-border-color); + border-top: 1px dotted var(--attachment-item-border-color); padding-top: 9px; width: 200px; position: relative; @@ -173,7 +173,7 @@ div#post_attachments_area.roundframe { min-height: initial; } #post_attachments_area #attachment_upload.dz-drag-hover { - border-color: #557ea0; + border-color: var(--attachment-dropzone-border-color_hover); } #post_attachments_area .dz-clickable { cursor: pointer; diff --git a/Themes/default/css/calendar.rtl.css b/Themes/default/css/calendar.rtl.css index 262239864fd..976b0be2192 100644 --- a/Themes/default/css/calendar.rtl.css +++ b/Themes/default/css/calendar.rtl.css @@ -8,8 +8,8 @@ margin: 0 0 0 1%; } #main_grid table.weeklist td.windowbg { - border-left: 2px solid #fff; - border-bottom: 2px solid #fff; + border-left: 2px solid var(--calendar-weeklist-border-color); + border-bottom: 2px solid var(--calendar-weeklist-border-color); } #main_grid img.calendar_icon { float: right; @@ -18,6 +18,6 @@ #main_grid table.weeklist td.weekdays { text-align: left; vertical-align: middle; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; + border-right: 2px solid var(--calendar-weeklist-border-color); + border-bottom: 2px solid var(--calendar-weeklist-border-color); } \ No newline at end of file diff --git a/Themes/default/css/dark.css b/Themes/default/css/dark.css index 48b84a7d1a0..37740b86058 100644 --- a/Themes/default/css/dark.css +++ b/Themes/default/css/dark.css @@ -538,6 +538,29 @@ /** Theme Picker **/ --picktheme-selected-bg: hsl(var(--primary-color-hue), 28%, 24%); + /** Mentions **/ + --mentions-bg: var(--dark-bg-3); + --mentions-border-color: var(--dark-line-strong); + --mentions-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + --mentions-item-bg: var(--dark-bg-2); + --mentions-item-bg_current: hsl(225, 55%, 42%); + --mentions-item-border-color: var(--dark-line); + --mentions-item-color: var(--dark-ink); + + /** Shorthand Borders **/ + --attachment-dropzone-border-color_hover: hsl(var(--primary-color-hue), 45%, 55%); + --attachment-item-border-color: var(--dark-line); + --buttonrow-border-color: var(--dark-line); + --calendar-weeklist-border-color: var(--dark-bg-1); + --detailedinfo-border-color: var(--dark-line); + --draftoptions-border-color_left: var(--dark-line-strong); + --draftoptions-item-border-color: var(--dark-line); + --errorfile-current-border-color: rgba(255, 255, 255, 0.2); + --innerwrap-border-color: var(--dark-line); + --listposts-border-color: var(--dark-line); + --mobileaction-item-border-color: var(--dark-line); + --upcontain-lastpost-border-color: var(--dark-line); + /** Admin **/ /* The permission grid is the one place a background alone carries the /* meaning - deny, allow, custom, unchanged - so those six keep their hues diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 2f2e70e1779..32c170b33ce 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1292,7 +1292,7 @@ h1.forumtitle { } h1.forumtitle a { color: var(--forumtitle-link-color); - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + text-shadow: var(--forumtitle-link-text-shadow); } /* Float these items to the right */ #siteslogan, img#smflogo { @@ -1316,7 +1316,7 @@ img#smflogo { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #bbb; + border-bottom: 1px solid var(--innerwrap-border-color); margin-bottom: 12px; padding: 12px 10px 2px 10px; } @@ -1959,8 +1959,8 @@ tr.windowbg td, tr.bg td, .table_grid tr td { } .errorfile_table td.current { font-weight: bold; - border-top: 1px solid rgba(0, 0, 0, 0.2); - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-top: 1px solid var(--errorfile-current-border-color); + border-bottom: 1px solid var(--errorfile-current-border-color); border-width: 1px 0 1px 1px; background: var(--errorfile-bg_current); } @@ -2513,7 +2513,7 @@ dl { margin-left: 25px; } .list_posts { - border-top: 1px solid #ddd; + border-top: 1px solid var(--listposts-border-color); box-shadow: var(--listposts-box-shadow); padding-top: 1em; margin-top: 1em; @@ -3673,13 +3673,13 @@ form#postmodify .roundframe { #post_draft_options { background: var(--draftoptions-bg); border: 1px solid var(--draftoptions-border-color); - border-left: 1px solid #bbb; + border-left: 1px solid var(--draftoptions-border-color_left); border-top: none; border-radius: 0 0 4px 4px; } #post_draft_options .settings dd, #post_draft_options .settings dt { width: 50%; - border-top: 1px solid #e4e4e4; + border-top: 1px solid var(--draftoptions-item-border-color); padding: 5px 10px; margin: 0; } diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index c54074e9dd1..8a43434043d 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -66,7 +66,7 @@ overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; - border-bottom: 1px #ccc solid; + border-bottom: 1px var(--detailedinfo-border-color) solid; } #detailedinfo dt, #tracking dt { diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index ea9261c6897..61293d09a61 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -72,7 +72,7 @@ margin: 0 auto; } #mobile_action .notify_dropdown a { - border-bottom: 1px solid #999; + border-bottom: 1px solid var(--mobileaction-item-border-color); } #mobile_action .notify_dropdown a:last-of-type { border-bottom: none; @@ -194,7 +194,7 @@ min-height: 2em; } .up_contain .lastpost { - border-top: 1px solid #ddd; + border-top: 1px solid var(--upcontain-lastpost-border-color); min-height: initial; } .lastpost p { diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 6dc4fc3d9ec..1be7dec6ad8 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -201,7 +201,7 @@ ul.quickbuttons li { } .buttonrow .button:first-child { border-radius: 0; - border-right: 1px solid #ccc; + border-right: 1px solid var(--buttonrow-border-color); } .post_verification #verification_control { diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index a7051b0d44a..11ef5e503ac 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -792,4 +792,46 @@ --editor-popup-container-bg: #f5f5f5; --editor-tablegrid-bg_active: #85a1b7; --editor-tablegrid-border-color: #85a1b7; + + /* Borders written as a shorthand rather than as a -color property, so + /* the sweep that tokenised the rest of the theme did not see them. */ + /** Shorthand Borders **/ + --attachment-dropzone-border-color_hover: #557ea0; + --attachment-item-border-color: #ddd; + --buttonrow-border-color: #ccc; + --calendar-weeklist-border-color: #fff; + --detailedinfo-border-color: #ccc; + --draftoptions-border-color_left: #bbb; + --draftoptions-item-border-color: #e4e4e4; + --errorfile-current-border-color: rgba(0, 0, 0, 0.2); + --forumtitle-link-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + --innerwrap-border-color: #bbb; + --listposts-border-color: #ddd; + --mobileaction-item-border-color: #999; + --upcontain-lastpost-border-color: #ddd; + + /* atwho.css already gives each of these a fallback, so the mentions list + /* has never looked wrong. But a token that is never declared cannot be + /* overridden either, which is what kept the list light in dark mode. Each + /* value here is the fallback it is declared from. */ + /** Mentions **/ + --mentions-bg: #fff; + --mentions-border-color: hsl(0, 0%, 85%); + --mentions-border-radius: 1px; + --mentions-border-style: solid; + --mentions-border-width: 1px; + --mentions-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + --mentions-item-bg: #f2f2f2; + --mentions-item-bg_current: hsl(225, 100%, 60%); + --mentions-item-border-color: hsl(0, 0%, 85%); + --mentions-item-border-style: solid; + --mentions-item-border-width: 0 0 1px; + --mentions-item-color: hsl(0, 0%, 20%); + --mentions-item-color_current: #fff; + --mentions-item-cursor: pointer; + --mentions-item-font-size: .95em; + --mentions-item-font-size_current: .95em; + --mentions-item-font-weight: normal; + --mentions-item-font-weight_current: normal; + --mentions-width: 120px; }