/* ═══════════════════════════════════════════════════════════ theme-toggle.css — Light / Dark theme switcher for ajvika.com Load this AFTER main.css and ajvika.css. Works by setting data-theme="light" | "dark" on . ═══════════════════════════════════════════════════════════ */ /* ── DARK THEME PALETTE ─────────────────────────────────────── */ html[data-theme="dark"] { --background-color: #0a1420; --default-color: #c3cddb; --heading-color: #ffffff; --accent-color: #02C8F5; --surface-color: #10233a; --contrast-color: #ffffff; --nav-color: #e7ecf3; --nav-hover-color: #02C8F5; --nav-mobile-background-color: #0a1420; --nav-dropdown-background-color: #10233a; --nav-dropdown-color: #e7ecf3; --nav-dropdown-hover-color: #02C8F5; } /* ── LIGHT THEME PALETTE (explicit, mirrors template defaults) ── */ html[data-theme="light"] { --background-color: #ffffff; --default-color: #444444; --heading-color: #222222; --accent-color: #02C8F5; --surface-color: #ffffff; --contrast-color: #ffffff; --nav-color: #222222; --nav-hover-color: #02C8F5; --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #222222; --nav-dropdown-hover-color: #02C8F5; } /* ── Section presets, made theme-relative instead of hardcoded ── */ html[data-theme="dark"] .light-background { --background-color: #10233a; --surface-color: #16304e; } html[data-theme="dark"] .dark-background { --background-color: #060f1a; --surface-color: #0f1f33; } html[data-theme="light"] .light-background { --background-color: #f5f9ff; --surface-color: #ffffff; } html[data-theme="light"] .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } /* ── Smooth transition when switching themes ────────────────── */ body, .header, .header .topbar, .header .branding, .footer, section, .navmenu ul, .navmenu ul li a, .ajvika-platform-card, .theme-card { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* ── Stats band (was a hardcoded inline gradient) ───────────── */ .stats-band { background: linear-gradient(90deg, #f0f4ff 0%, #e8edff 100%); border-top: 2px solid #dde4f7; border-bottom: 2px solid #dde4f7; } html[data-theme="dark"] .stats-band { background: linear-gradient(90deg, #0f2038 0%, #142944 100%); border-top: 2px solid #1c3654; border-bottom: 2px solid #1c3654; } /* ── Generic surface card (InnovaTe X box, etc.) ────────────── */ .theme-card { background: var(--surface-color); } /* ── Platform / ecosystem cards ─────────────────────────────── */ html[data-theme="dark"] .ajvika-platform-card { background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); } /* ── Scrollbar (nice to have, matches theme) ────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1420; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #23415f; border-radius: 6px; } /* ═══════════════════════════════════════════════════════════ THEME TOGGLE SWITCH — sits in the topbar next to social icons ═══════════════════════════════════════════════════════════ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 60%); background: color-mix(in srgb, var(--contrast-color), transparent 88%); color: var(--contrast-color); cursor: pointer; font-size: 14px; line-height: 1; margin-left: 16px; transition: background .25s ease, transform .25s ease; flex-shrink: 0; } .theme-toggle-btn:hover { background: color-mix(in srgb, var(--contrast-color), transparent 75%); transform: translateY(-1px); } .theme-toggle-btn i { pointer-events: none; } /* Show only the icon matching the CURRENT theme (click to switch to the other) */ .theme-toggle-btn .bi-sun-fill { display: none; } html[data-theme="dark"] .theme-toggle-btn .bi-moon-stars-fill { display: none; } html[data-theme="dark"] .theme-toggle-btn .bi-sun-fill { display: inline-block; } @media (max-width: 575px) { .theme-toggle-btn { margin-left: 10px; } } /* ═══════════════════════════════════════════════════════════ ADMIN PANEL + LOGIN — same light/dark system, shared vars ═══════════════════════════════════════════════════════════ */ html[data-theme="light"] { --admin-bg: #f1f5f9; --admin-surface: #ffffff; --admin-border: #e2e8f0; --admin-heading: #0f172a; --admin-text: #475569; --admin-muted: #64748b; --admin-table-head: #f8fafc; --admin-hover: #f8fafc; --admin-new-row: #fffbeb; } html[data-theme="dark"] { --admin-bg: #0a1420; --admin-surface: #10233a; --admin-border: #1e3a5a; --admin-heading: #ffffff; --admin-text: #c3cddb; --admin-muted: #93a4bd; --admin-table-head: #0e1e33; --admin-hover: #16304e; --admin-new-row: #2a2313; } /* Toggle button variant for light-surface contexts (login card, admin topbar) */ .theme-toggle-btn.on-surface { border-color: var(--admin-border); background: var(--admin-bg); color: var(--admin-heading); } .theme-toggle-btn.on-surface:hover { background: var(--admin-hover); }