/* styles/blackwhite-theme/blackwhite-theme.css SpinChoice — Dark/Light Theme Toggle - Default: dark (your current) - Light mode uses [data-theme="light"] on */ /* ---------- Header right side (nav + toggle) ---------- */ .header__right{ display: inline-flex; align-items: center; gap: 10px; } /* ---------- Toggle UI ---------- */ .theme-toggle{ border: 1px solid rgba(148,163,184,.28); background: rgba(2,6,23,.35); border-radius: 999px; padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s ease, border-color .18s ease, transform .06s ease; } .theme-toggle:hover{ background: rgba(2,6,23,.55); } .theme-toggle:active{ transform: translateY(1px); } .theme-toggle__track{ width: 46px; height: 26px; border-radius: 999px; background: rgba(15,23,42,.65); border: 1px solid rgba(148,163,184,.22); position: relative; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } .theme-toggle__thumb{ position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 999px; background: #0b1220; border: 1px solid rgba(148,163,184,.25); display: grid; place-items: center; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; } /* Icons */ .theme-toggle__icon{ position: absolute; font-size: 14px; line-height: 1; opacity: 0; transform: scale(.9); transition: opacity .18s ease, transform .18s ease; user-select: none; } .theme-toggle__icon--moon{ opacity: 1; transform: scale(1); } /* Light state: thumb slides right + shows sun */ html[data-theme="light"] .theme-toggle__thumb{ transform: translateX(20px); background: #ffffff; border-color: rgba(15,23,42,.18); } html[data-theme="light"] .theme-toggle__icon--moon{ opacity: 0; transform: scale(.9); } html[data-theme="light"] .theme-toggle__icon--sun{ opacity: 1; transform: scale(1); } /* ---------- THEME TOKENS (we override your existing colors safely) ---------- */ /* LIGHT THEME */ html[data-theme="light"] body{ color: #0f172a; background: radial-gradient(circle at top, #ffffff 0, #f3f4f6 55%, #eef2f7 100%); } /* Links */ html[data-theme="light"] a{ color: #1d4ed8; } html[data-theme="light"] a:hover{ color: #1e40af; } /* Header */ html[data-theme="light"] .site-header{ background-color: rgba(255,255,255,0.92); border-bottom-color: rgba(15,23,42,.10); } html[data-theme="light"] .site-header--scrolled{ background-color: rgba(255,255,255,0.97); border-bottom-color: rgba(15,23,42,.12); box-shadow: 0 18px 40px rgba(15,23,42,0.10); } /* Header text */ html[data-theme="light"] .logo-text{ color: #0f172a; } html[data-theme="light"] .logo-text span{ color: #2563eb; } html[data-theme="light"] .nav a{ color: rgba(15,23,42,.70); } html[data-theme="light"] .nav a:hover{ color: #0f172a; background-color: rgba(37,99,235,.10); box-shadow: 0 10px 20px rgba(15,23,42,.08); } html[data-theme="light"] .nav a:hover::after{ border-color: rgba(37,99,235,.35); } /* Inputs card */ html[data-theme="light"] .inputs-card{ background-color: #ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 22px 45px rgba(15,23,42,.08); } html[data-theme="light"] .inputs-card__label{ color: #0f172a; } /* Textarea */ html[data-theme="light"] #optionsInput{ background-color: #ffffff; color: #0f172a; border-color: rgba(15,23,42,.18); } html[data-theme="light"] #optionsInput::placeholder{ color: rgba(15,23,42,.45); } /* Buttons */ html[data-theme="light"] .btn--ghost{ background-color: #ffffff; border-color: rgba(15,23,42,.18); color: rgba(15,23,42,.85); } html[data-theme="light"] .btn--ghost:hover{ background-color: #f3f4f6; border-color: rgba(15,23,42,.24); } /* Hint text */ html[data-theme="light"] .inputs-card__hint{ color: rgba(15,23,42,.55); } /* Sections text */ html[data-theme="light"] .info h2, html[data-theme="light"] .info h3{ color: #0f172a; } html[data-theme="light"] .steps, html[data-theme="light"] .uses{ color: rgba(15,23,42,.70); } /* FAQ + metrics section */ html[data-theme="light"] .faq-metrics{ border-top-color: rgba(15,23,42,.10); background: radial-gradient(circle at top, #ffffff 0, #f6f7fb 40%, #eef2f7 100%); } html[data-theme="light"] .faq-metrics__faq h2, html[data-theme="light"] .faq-metrics__metrics h2{ color: #0f172a; } html[data-theme="light"] .faq-item h3{ color: #0f172a; } html[data-theme="light"] .faq-item p{ color: rgba(15,23,42,.75); } html[data-theme="light"] .faq-metrics__metrics{ background: radial-gradient(circle at top, #ffffff 0, #f3f4f6 60%); border-color: rgba(15,23,42,.12); box-shadow: 0 22px 45px rgba(15,23,42,.08); } html[data-theme="light"] .metric-label{ color: rgba(15,23,42,.55); } html[data-theme="light"] .metric-value{ color: #0f172a; } /* Footer */ html[data-theme="light"] .site-footer{ background-color: #ffffff; border-top-color: rgba(15,23,42,.10); } html[data-theme="light"] .footer__inner{ color: rgba(15,23,42,.55); } html[data-theme="light"] .footer__links a{ color: rgba(15,23,42,.65); } html[data-theme="light"] .footer__links a:hover{ color: #0f172a; } /* Toggle in light */ html[data-theme="light"] .theme-toggle{ background: rgba(255,255,255,.65); border-color: rgba(15,23,42,.12); } html[data-theme="light"] .theme-toggle__track{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10); } /* ========================================================= DARK THEME (premium charcoal — less blue) Put this at the BOTTOM so it overrides everything above. ========================================================= */ /* Premium charcoal page background (no discord-blue) */ html:not([data-theme="light"]) body{ color: #e5e7eb; background: radial-gradient(circle at top, #15171c 0, #0b0d10 58%, #07080a 100%) !important; } /* Surfaces (cards) slightly warmer/neutral gray */ html:not([data-theme="light"]) .inputs-card{ background-color: #101217 !important; /* premium dark surface */ border-color: rgba(255,255,255,.06) !important; box-shadow: 0 22px 45px rgba(0, 0, 0, 0.72) !important; } /* Textarea background: deeper charcoal */ html:not([data-theme="light"]) #optionsInput{ background-color: #0a0c10 !important; border-color: rgba(255,255,255,.10) !important; } /* Header: less blue, more neutral charcoal glass */ html:not([data-theme="light"]) .site-header{ background-color: rgba(10, 12, 16, 0.82) !important; border-bottom-color: rgba(255,255,255,.06) !important; } html:not([data-theme="light"]) .site-header--scrolled{ background-color: rgba(8, 10, 13, 0.92) !important; border-bottom-color: rgba(255,255,255,.08) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.78) !important; } /* Buttons: keep your brand blue but make ghost buttons match premium dark */ html:not([data-theme="light"]) .btn--ghost{ background-color: rgba(16,18,23,.9) !important; border-color: rgba(255,255,255,.10) !important; } html:not([data-theme="light"]) .btn--ghost:hover{ background-color: rgba(22,24,30,.92) !important; border-color: rgba(255,255,255,.14) !important; } /* Footer: neutral dark */ html:not([data-theme="light"]) .site-footer{ background-color: #07080a !important; border-top-color: rgba(255,255,255,.06) !important; } /* ========================================================= FINAL OVERRIDE — Theme toggle icon colors (bulletproof) Dark: moon WHITE Light: sun BLACK ========================================================= */ /* The thumb decides the icon color */ .theme-toggle__thumb{ color: #ffffff !important; /* dark icon color */ filter: none !important; mix-blend-mode: normal !important; } html[data-theme="light"] .theme-toggle__thumb{ color: #0f172a !important; /* light icon color (black) */ filter: none !important; mix-blend-mode: normal !important; } /* Icons ALWAYS follow currentColor (no inheritance surprises) */ .theme-toggle__thumb .theme-toggle__icon{ color: currentColor !important; -webkit-text-fill-color: currentColor !important; filter: none !important; mix-blend-mode: normal !important; } /* ========================================================= FINAL VISIBILITY OVERRIDE — show correct icon per theme Light: SUN only Dark : MOON only ========================================================= */ /* hide both by default */ .theme-toggle__icon{ opacity: 0 !important; transform: scale(.9) !important; } /* LIGHT MODE -> show SUN, hide MOON */ html[data-theme="light"] .theme-toggle__icon--sun{ opacity: 1 !important; transform: scale(1) !important; } html[data-theme="light"] .theme-toggle__icon--moon{ opacity: 0 !important; } /* DARK MODE -> show MOON, hide SUN */ html:not([data-theme="light"]) .theme-toggle__icon--moon{ opacity: 1 !important; transform: scale(1) !important; } html:not([data-theme="light"]) .theme-toggle__icon--sun{ opacity: 0 !important; }