/* ============================================================ themes.css — dark-theme overrides + theme-toggle button. Activated by [data-theme="dark"] on the element (set by the theme switch and persisted in localStorage). ============================================================ */ /* Theme toggle button in the navigation */ .theme-toggle-wrap { display: flex; align-items: center; } .theme-toggle .fa-sun { display: none; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } [data-theme="dark"] .theme-toggle .fa-sun { display: inline; } /* ---------- DARK THEME ---------- */ [data-theme="dark"] { --bg: #0f1513; --surface: #18211d; --surface-2: #131a17; --text: #e7efe9; --text-soft: #9fb4ab; --border: #29352f; --accent: #2dd4bf; --accent-dark: #5eead4; --accent-soft: rgba(45, 212, 191, 0.15); --accent-2: #14b8a6; --glass-bg: rgba(20, 28, 24, 0.62); --glass-card: rgba(28, 38, 33, 0.68); --glass-border: rgba(255, 255, 255, 0.08); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5); } [data-theme="dark"] body { background: radial-gradient( 900px 500px at 85% -8%, rgba(20, 184, 166, 0.14) 0%, transparent 55% ), radial-gradient( 700px 500px at -5% 8%, rgba(107, 79, 160, 0.12) 0%, transparent 50% ), var(--bg); } /* Keep gradient buttons readable on dark */ [data-theme="dark"] .btn-ghost { color: var(--accent-dark); } [data-theme="dark"] .data-table th { background: #14534c; } /* Quill editor in dark mode */ [data-theme="dark"] .ql-toolbar .ql-stroke { stroke: var(--text-soft); } [data-theme="dark"] .ql-toolbar .ql-fill { fill: var(--text-soft); } [data-theme="dark"] .ql-toolbar .ql-picker { color: var(--text-soft); } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-soft); } /* Smooth transition when switching themes */ body, .site-header, .nav-search input, .field input, .field select, .field textarea, .blog-card, .data-table, .panel, .stat-card, .content-page, .post, .admin-bar, .nav-menu { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }