From 3e02a083eddaaf43446fccdfae3cf5d72aa2728d Mon Sep 17 00:00:00 2001 From: Julien Bourdin Date: Wed, 6 May 2026 10:11:58 +0200 Subject: [PATCH] experiment(theme): DRY dark-mode surfaces with shared CSS tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Promote the repeated dark-surface literals (#1a2238 ×5, white/12% ×7, white/4% ×3, white/6% ×3, white/8% ×2) to scoped CSS custom properties declared once at :root[data-bs-theme="dark"]: --ed-surface-elevated #1a2238 --ed-border-faint rgb(255 255 255 / 12%) --ed-overlay-faint rgb(255 255 255 / 4%) --ed-overlay-soft rgb(255 255 255 / 6%) --ed-overlay-medium rgb(255 255 255 / 8%) Rewrite the Bootstrap-component dark overrides (.card, .dropdown-menu, .modal-content, .popover, .list-group, .table, .alert, .form-control) and the themed surfaces (.card-header-themed, .table-themed thead, rich-text tables) to read from those tokens. Drop the redundant [data-bs-theme="dark"] body { background-color: var(--ed-bg) } rule by moving body's background-color from $ed-bg to var(--ed-bg) directly, so the dark variant takes effect through the existing --ed-bg switch. Cosmetic tightening: .form-control border opacity unified at 12% (was 15%, lone outlier among 7 borders at 12%). expandedtalks dark .card-header-themed picks up the same --ed-overlay-soft for consistency across themes. --- assets/styles/app.scss | 59 +++++++++++-------- .../themes/expandedtalks/_overrides.scss | 2 +- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 0a95551..bcc5327 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -80,6 +80,14 @@ $grid-row-columns: 9; --ed-gold: #ffd95e; --ed-red: #ff7080; --ed-bg: #121826; + + // Dark-only surface tokens — used by the Bootstrap-component overrides + // and themed surfaces below. + --ed-surface-elevated: #1a2238; + --ed-border-faint: rgb(255 255 255 / 12%); + --ed-overlay-faint: rgb(255 255 255 / 4%); + --ed-overlay-soft: rgb(255 255 255 / 6%); + --ed-overlay-medium: rgb(255 255 255 / 8%); } // --- Layout --- @@ -95,7 +103,7 @@ body { // Quincunx (staggered) Fairy energy texture on the body background. // Two offset layers of the same tile create the honeycomb-like pattern. // Cards and panels sit on top with solid white, making them pop. - background-color: $ed-bg; + background-color: var(--ed-bg); background-image: url('../images/bg_fairy_quincunx.png'); background-size: 96px 80px; background-repeat: repeat; @@ -752,7 +760,6 @@ footer { [data-bs-theme="dark"] { body { - background-color: var(--ed-bg); background-image: none; } @@ -763,51 +770,51 @@ footer { // restore Bootstrap's native dark mode for those surfaces we re-declare // the CSS custom properties on the component selectors under dark mode. .card { - --bs-card-bg: #1a2238; - --bs-card-border-color: rgb(255 255 255 / 12%); - --bs-card-cap-bg: rgb(255 255 255 / 4%); + --bs-card-bg: var(--ed-surface-elevated); + --bs-card-border-color: var(--ed-border-faint); + --bs-card-cap-bg: var(--ed-overlay-faint); } .dropdown-menu { - --bs-dropdown-bg: #1a2238; - --bs-dropdown-border-color: rgb(255 255 255 / 12%); - --bs-dropdown-link-hover-bg: rgb(255 255 255 / 8%); - --bs-dropdown-divider-bg: rgb(255 255 255 / 10%); + --bs-dropdown-bg: var(--ed-surface-elevated); + --bs-dropdown-border-color: var(--ed-border-faint); + --bs-dropdown-link-hover-bg: var(--ed-overlay-medium); + --bs-dropdown-divider-bg: var(--ed-border-faint); } .modal-content { - --bs-modal-bg: #1a2238; - --bs-modal-border-color: rgb(255 255 255 / 12%); + --bs-modal-bg: var(--ed-surface-elevated); + --bs-modal-border-color: var(--ed-border-faint); } .popover { - --bs-popover-bg: #1a2238; - --bs-popover-border-color: rgb(255 255 255 / 12%); + --bs-popover-bg: var(--ed-surface-elevated); + --bs-popover-border-color: var(--ed-border-faint); } .list-group { - --bs-list-group-bg: #1a2238; - --bs-list-group-border-color: rgb(255 255 255 / 12%); - --bs-list-group-action-hover-bg: rgb(255 255 255 / 6%); + --bs-list-group-bg: var(--ed-surface-elevated); + --bs-list-group-border-color: var(--ed-border-faint); + --bs-list-group-action-hover-bg: var(--ed-overlay-soft); } .table { - --bs-table-striped-bg: rgb(255 255 255 / 4%); - --bs-table-border-color: rgb(255 255 255 / 12%); + --bs-table-striped-bg: var(--ed-overlay-faint); + --bs-table-border-color: var(--ed-border-faint); } .alert { - --bs-alert-border-color: rgb(255 255 255 / 12%); + --bs-alert-border-color: var(--ed-border-faint); } .form-control, .form-select { - background-color: rgb(255 255 255 / 4%); - border-color: rgb(255 255 255 / 15%); + background-color: var(--ed-overlay-faint); + border-color: var(--ed-border-faint); color: var(--bs-body-color); &:focus { - background-color: rgb(255 255 255 / 6%); + background-color: var(--ed-overlay-soft); } } @@ -820,7 +827,7 @@ footer { } .card-header-themed { - background-color: rgb(255 255 255 / 6%); + background-color: var(--ed-overlay-soft); border-bottom-color: var(--ed-gold); .nav-tabs .nav-link.active { @@ -831,7 +838,7 @@ footer { } .table-themed thead { - background-color: rgb(255 255 255 / 6%); + background-color: var(--ed-overlay-soft); } .badge-lent { @@ -851,12 +858,12 @@ footer { .mantine-RichTextEditor-content, .cms-content { th { - background-color: rgb(255 255 255 / 8%); + background-color: var(--ed-overlay-medium); } } /* stylelint-disable-next-line selector-class-pattern */ .mantine-RichTextEditor-content .selectedCell { - background-color: rgb(255 255 255 / 12%); + background-color: var(--ed-border-faint); } } diff --git a/assets/styles/themes/expandedtalks/_overrides.scss b/assets/styles/themes/expandedtalks/_overrides.scss index 6d64f00..19952e5 100644 --- a/assets/styles/themes/expandedtalks/_overrides.scss +++ b/assets/styles/themes/expandedtalks/_overrides.scss @@ -150,7 +150,7 @@ a { } .card-header-themed { - background: rgba(#fff, .06); + background: var(--ed-overlay-soft); border-bottom: 2px solid $cs-sand; }