/* GateAnime Theme Mode v2 (Light/Dark) - Activated by adding `ga-dark` class to . - Stores user choice in localStorage: gateanime_color_scheme => "dark"|"light" - Uses CSS variables for clean, modern overrides. */ :root{ --ga-bg: #ffffff; --ga-surface: #f6f7f9; --ga-surface-2: #ffffff; --ga-text: #111827; --ga-muted: #6b7280; --ga-border: rgba(17,24,39,.12); --ga-shadow: 0 10px 30px rgba(0,0,0,.08); --ga-toggle-bg: rgba(255,255,255,.92); --ga-toggle-fg: #111827; --ga-toggle-br: rgba(17,24,39,.16); } html.ga-dark{ --ga-bg: #0b0f14; --ga-surface: #0f1621; --ga-surface-2: #121b28; --ga-text: #e6edf3; --ga-muted: #9aa4b2; --ga-border: rgba(255,255,255,.12); --ga-shadow: 0 10px 30px rgba(0,0,0,.45); --ga-toggle-bg: rgba(18,27,40,.92); --ga-toggle-fg: #e6edf3; --ga-toggle-br: rgba(255,255,255,.16); color-scheme: dark; } /* Smooth but subtle transitions (avoid animating huge lists too aggressively). */ html, body{ transition: background-color .18s ease, color .18s ease; } /* Base page */ html.ga-dark body{ background: var(--ga-bg) !important; color: var(--ga-text) !important; } html.ga-dark hr{ border-color: var(--ga-border); } /* Inputs */ html.ga-dark input, html.ga-dark select, html.ga-dark textarea{ background-color: var(--ga-surface-2) !important; color: var(--ga-text) !important; border-color: var(--ga-border) !important; } html.ga-dark ::placeholder{ color: rgba(154,164,178,.75); } /* Header / Nav / Footer surfaces IMPORTANT: do NOT target generic
/