/* ========================================================== SHOPOCROP DARK THEME Activates when [data-theme="dark"] is set on . Loaded AFTER design-system.css so it overrides tokens. ========================================================== */ [data-theme="dark"] { /* Backgrounds & Surfaces */ --color-bg: #121212; --color-surface: #1E1E1E; --color-surface-2: #1A1A1A; /* nested/muted panels */ /* Text */ --color-text: #E0E0E0; --color-text-muted: #A0A0A0; /* --color-text-white stays #FFFFFF (used on brand-colored fills) */ /* Borders & Dividers */ --color-border: #2C2C2C; --color-table-alt: #242424; /* Brand greens stay identical across both themes (per spec) */ /* Shadows tuned for dark surfaces */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 8px 32px rgba(46, 125, 50, 0.35); --shadow-btn: 0 2px 8px rgba(46, 125, 50, 0.40); /* Admin-layout-specific tokens (defined inline in MainLayout) */ --ml-page-bg: #121212; --ml-text: #E0E0E0; /* ------------------------------------------------------ NiceShop (main.css) template token remap. The public site is styled by main.css, which uses its OWN variable system (separate from the --color-* tokens above). Without remapping these, body text/headings stay dark and every surface-based card stays white in dark mode. These vars drive ~1000 rules across the public site. ------------------------------------------------------ */ --background-color: #121212; --default-color: #E0E0E0; --heading-color: #FFFFFF; --surface-color: #1E1E1E; --accent-color: #43A047; /* readable, on-brand green for links/buttons */ /* --contrast-color stays #FFFFFF (text on accent-colored fills) */ /* Nav dropdown surfaces (desktop --nav-color sits on the green header) */ --nav-mobile-background-color: #1E1E1E; --nav-dropdown-background-color: #1E1E1E; --nav-dropdown-color: #E0E0E0; --nav-dropdown-hover-color: #43A047; color-scheme: dark; } /* NiceShop ".light-background" sections locally reset the template tokens back to light values; re-skin them for dark mode so they don't punch white holes into the page. */ [data-theme="dark"] .light-background { --background-color: #1A1A1A; --surface-color: #1E1E1E; } /* ---------------------------------------------------------- HOMEPAGE "EDITOR'S SELECTION" (.promo-cards / .es-*) Bespoke section with hardcoded warm-cream bg and dark-green text. Re-skin for dark mode (selectors scoped under .promo-cards to beat the page's inline