/* ========================================================================= Dark / Light Mode Toggle ========================================================================= Two parts: 1. THE BUTTON — a small pill-style switch with a sun/moon icon on the sliding thumb, styled with the theme's own brand colors (--gzf-color-primary / --gzf-color-accent) so it matches the existing gaming-style design in both modes. 2. LIGHT MODE — redefines the handful of neutral CSS custom properties (background, surface, card background, text, headings, borders, header/footer background) that Header, Footer, Cards, Sidebar and body text throughout the theme already use everywhere. Brand colors (primary/secondary/accent/link/button) are intentionally left untouched in both modes, so a site's existing color choices and overall design are unaffected — only the light/dark neutrals change. Everything below is scoped under `html[data-gzf-theme="light"]`. That attribute is only ever added to by inc/theme-toggle.php + assets/js/theme-toggle.js, and only while the toggle is enabled, so none of this can ever apply when the feature is turned OFF. ========================================================================= */ /* ------------------------------------------------------------------- * 1. Button * ------------------------------------------------------------------- */ .gzfc-theme-toggle { display: inline-flex; align-items: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .gzfc-theme-toggle-track { position: relative; width: 50px; height: 27px; border-radius: 999px; background: var( --gzf-color-surface ); border: 1px solid var( --gzf-color-border ); transition: background var( --gzf-transition, 200ms ease ), border-color var( --gzf-transition, 200ms ease ); } .gzfc-theme-toggle:hover .gzfc-theme-toggle-track { border-color: var( --gzf-color-primary ); } .gzfc-theme-toggle:focus-visible .gzfc-theme-toggle-track { outline: 2px solid var( --gzf-color-primary ); outline-offset: 2px; } .gzfc-theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient( 135deg, var( --gzf-color-primary ), var( --gzf-color-secondary ) ); box-shadow: 0 2px 6px rgba( 0, 0, 0, .35 ); transform: translateX( 0 ); transition: transform .3s cubic-bezier( .4, 0, .2, 1 ), background .3s ease; } .gzfc-theme-icon { width: 13px; height: 13px; } .gzfc-theme-toggle-thumb .gzfc-theme-icon-sun { display: none; } .gzfc-theme-toggle-thumb .gzfc-theme-icon-moon { display: inline-flex; } html[ data-gzf-theme='light' ] .gzfc-theme-toggle-thumb { transform: translateX( 23px ); background: linear-gradient( 135deg, var( --gzf-color-accent ), var( --gzf-color-secondary ) ); } html[ data-gzf-theme='light' ] .gzfc-theme-toggle-thumb .gzfc-theme-icon-sun { display: inline-flex; } html[ data-gzf-theme='light' ] .gzfc-theme-toggle-thumb .gzfc-theme-icon-moon { display: none; } @media ( max-width: 480px ) { .gzfc-theme-toggle-track { width: 42px; height: 24px; } .gzfc-theme-toggle-thumb { width: 18px; height: 18px; } html[ data-gzf-theme='light' ] .gzfc-theme-toggle-thumb { transform: translateX( 18px ); } } /* ------------------------------------------------------------------- * 2. Light Mode — neutral color system * ------------------------------------------------------------------- */ html[ data-gzf-theme='light' ] { --gzf-color-bg: #f6f6f9; --gzf-color-surface: #ffffff; --gzf-color-card-bg: #ffffff; --gzf-color-text: #202024; --gzf-color-muted: #63636c; --gzf-color-heading: #101013; --gzf-color-border: rgba( 0, 0, 0, .1 ); --gzf-header-bg: #ffffff; --gzf-header-border-color: rgba( 0, 0, 0, .08 ); --gzf-footer-bg: #eceef2; } /* The framework's default Background Skin ("Gradient") writes a body{} background rule directly with the two Gradient Start/End hex colors from the Customizer — it does not go through a CSS variable, so it cannot be swapped by the block above. The extra attribute-selector here gives this rule higher specificity than that plain `body{}` rule regardless of load order, so Light Mode always wins without needing `!important` or touching the framework at all. */ html[ data-gzf-theme='light' ] body { background: var( --gzf-color-bg ); } html[ data-gzf-theme='light' ] .gzf-site-wrap { background: var( --gzf-color-bg ); } /* A few small decorative accents elsewhere in the theme are hand-set to a translucent WHITE (subtle hover tints meant for a dark surface) — the theme's structural colors above already fix the vast majority of the design automatically, this just keeps those specific hover states visible instead of nearly invisible on a light background. */ html[ data-gzf-theme='light' ] body.gzfc-search-icon-style-circle .gzfc-search-icon-btn, html[ data-gzf-theme='light' ] .gzfc-search-compact-trigger:hover, html[ data-gzf-theme='light' ] .gzfc-hs-widgets-style--card .gzf-widget li { background: rgba( 0, 0, 0, .045 ); } html[ data-gzf-theme='light' ] .gzfc-hs-widgets-style--card .gzf-widget li:hover { background: rgba( 0, 0, 0, .075 ); } html[ data-gzf-theme='light' ] .gzfc-hs-widgets-style--neon .gzf-widget-title, html[ data-gzf-theme='light' ] .gzfc-hs-widgets-style--neon .gzf-widget li { border-color: rgba( 0, 0, 0, .15 ); } html[ data-gzf-theme='light' ] .gzfc-hs-widgets-style--neon .gzf-widget .search-form .search-field { border-color: rgba( 0, 0, 0, .15 ); }