From 288c7ac33fba2c2946416736370858ea0208fe87 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Mon, 17 Aug 2026 21:35:13 +0400 Subject: [PATCH] fix: wire dark-mode theme tokens for all three tenant themes (Z1) theme-engine.service.ts already sets [data-theme-mode] on the root, but no CSS anywhere consumed it - picking Dark/System never changed anything visually. Adds a structural dark override block per theme (dexar/lavero/ novo): bg/text/border/shadow tokens only. Brand colors (primary/secondary/ accent/gradients) are left untouched - a distinct dark-mode brand palette is a design decision for the theme owner, not made here. Also verified during this pass, no change needed (GAPS-AND-IMPROVEMENTS.md was stale on these): - og:locale already reads languageService.currentLanguage() dynamically - SeoService.setItemMeta() is already called from product-details-container - stars.component.scss already uses var(--border-color), no literal hex - sellerId is already typed UUID, no bare-string field remains Co-Authored-By: Claude Sonnet 5 --- src/styles/themes/dexar.theme.scss | 21 +++++++++++++++++++++ src/styles/themes/lavero.theme.scss | 21 +++++++++++++++++++++ src/styles/themes/novo.theme.scss | 21 +++++++++++++++++++++ 3 files changed, 63 insertions(+) diff --git a/src/styles/themes/dexar.theme.scss b/src/styles/themes/dexar.theme.scss index 893ef68..2ce97ca 100644 --- a/src/styles/themes/dexar.theme.scss +++ b/src/styles/themes/dexar.theme.scss @@ -39,6 +39,27 @@ --radius-full: 999px; } +// Structural dark-mode overrides only (surface/text/border tokens). Brand +// colors (primary/secondary/accent/gradients) are unchanged - a distinct +// dark-mode brand palette is a design decision, not made here. See +// GAPS-AND-IMPROVEMENTS.md item "Dark mode selector does nothing". +:root[data-theme-mode="dark"] { + --text-primary: #eef4f3; + --text-secondary: #b7c4c2; + --text-light: #8a9c9a; + + --bg-primary: #10201e; + --bg-secondary: #16302c; + --bg-tertiary: #1c3a35; + --bg-header: rgba(0, 0, 0, 0.35); + + --border-color: #2c4a45; + --border-dark: #3f6660; + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); + --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); +} + body { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } diff --git a/src/styles/themes/lavero.theme.scss b/src/styles/themes/lavero.theme.scss index 83a970e..b4f6015 100644 --- a/src/styles/themes/lavero.theme.scss +++ b/src/styles/themes/lavero.theme.scss @@ -38,3 +38,24 @@ --radius-xl: 20px; --radius-full: 999px; } + +// Structural dark-mode overrides only (surface/text/border tokens). Brand +// colors (primary/secondary/accent/gradients) are unchanged - a distinct +// dark-mode brand palette is a design decision, not made here. See +// GAPS-AND-IMPROVEMENTS.md item "Dark mode selector does nothing". +:root[data-theme-mode="dark"] { + --text-primary: #f3f4f6; + --text-secondary: #cbd2da; + --text-light: #9aa4b1; + + --bg-primary: #16181d; + --bg-secondary: #10231a; + --bg-tertiary: #123a29; + --bg-header: rgba(0, 0, 0, 0.35); + + --border-color: #33383f; + --border-dark: #4b5563; + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); +} diff --git a/src/styles/themes/novo.theme.scss b/src/styles/themes/novo.theme.scss index 56bcd44..86cd25e 100644 --- a/src/styles/themes/novo.theme.scss +++ b/src/styles/themes/novo.theme.scss @@ -38,3 +38,24 @@ --radius-xl: 20px; --radius-full: 999px; } + +// Structural dark-mode overrides only (surface/text/border tokens). Brand +// colors (primary/secondary/accent/gradients) are unchanged - a distinct +// dark-mode brand palette is a design decision, not made here. See +// GAPS-AND-IMPROVEMENTS.md item "Dark mode selector does nothing". +:root[data-theme-mode="dark"] { + --text-primary: #f3f4f6; + --text-secondary: #cbd2da; + --text-light: #9aa4b1; + + --bg-primary: #14181a; + --bg-secondary: #10231a; + --bg-tertiary: #123a29; + --bg-header: rgba(0, 0, 0, 0.35); + + --border-color: #313a37; + --border-dark: #4b5563; + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); +}