/* * MesutStore — Dark Mode CSS * Applied when has class="dark" * Uses CSS custom properties so Tailwind dark: variants work alongside manual overrides. */ /* ── Smooth transitions on theme change ──────────────────────────────────────── */ html { transition: background-color 0.25s ease, color 0.25s ease; } /* ── Dark mode root variables ────────────────────────────────────────────────── */ html.dark { --color-bg: #0F172A; /* navy-900 */ --color-bg-secondary: #1E293B; /* navy-800 */ --color-surface: #1E293B; /* card surfaces */ --color-surface-alt: #273549; /* elevated cards */ --color-border: #334155; /* slate-700 */ --color-text: #F1F5F9; /* slate-100 */ --color-text-muted: #94A3B8; /* slate-400 */ --color-orange: #F97316; /* brand stays same */ color-scheme: dark; } /* ── Page background ─────────────────────────────────────────────────────────── */ html.dark body { background-color: var(--color-bg); color: var(--color-text); } /* ── Main background sections ────────────────────────────────────────────────── */ html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: var(--color-bg-secondary) !important; } html.dark .bg-white { background-color: var(--color-surface) !important; color: var(--color-text); } /* ── Borders ─────────────────────────────────────────────────────────────────── */ html.dark .border-gray-200, html.dark .border-gray-100 { border-color: var(--color-border) !important; } /* ── Text colors ─────────────────────────────────────────────────────────────── */ html.dark .text-navy-900, html.dark .text-gray-900 { color: var(--color-text) !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: #CBD5E1 !important; /* slate-300 */ } html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--color-text-muted) !important; } /* ── Cards ───────────────────────────────────────────────────────────────────── */ html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4); } html.dark .hover\:shadow-lg:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.5); } html.dark .bg-gray-50\/50 { background-color: rgba(30, 41, 59, 0.5) !important; } /* ── Inputs & Form elements ──────────────────────────────────────────────────── */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="search"], html.dark select, html.dark textarea { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark input::placeholder { color: var(--color-text-muted) !important; } /* ── Search dropdown ─────────────────────────────────────────────────────────── */ html.dark #mesutstore-search-dropdown { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } html.dark #mesutstore-search-dropdown .result-item:hover, html.dark #mesutstore-search-dropdown .result-item.bg-gray-50 { background-color: var(--color-surface-alt) !important; } /* ── Archive product grid ────────────────────────────────────────────────────── */ html.dark #mesutstore-product-grid .hover\:shadow-lg { border-color: var(--color-border); } /* ── Filter sidebar ──────────────────────────────────────────────────────────── */ html.dark #mesutstore-filter-form > div { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } html.dark .sticky { background-color: var(--color-surface); } /* ── Single product sidebar ──────────────────────────────────────────────────── */ html.dark .border-t-4.border-brandOrange { background-color: var(--color-surface) !important; } /* ── My Account sidebar nav ──────────────────────────────────────────────────── */ html.dark nav.flex.flex-col a { color: #CBD5E1; } html.dark nav.flex.flex-col a:hover { background-color: var(--color-surface-alt) !important; } /* ── Prose (docs, product descriptions) ──────────────────────────────────────── */ html.dark .prose { color: #CBD5E1; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4 { color: var(--color-text); } html.dark .prose code { background-color: var(--color-surface-alt); color: #FDA4AF; } html.dark .prose pre { background-color: #020617 !important; /* Very dark for code blocks */ } html.dark .prose a { color: var(--color-orange); } html.dark .prose blockquote { border-left-color: var(--color-border); color: var(--color-text-muted); } /* ── Toggle button itself ────────────────────────────────────────────────────── */ #mesutstore-theme-toggle { transition: color 0.2s ease, background-color 0.2s ease; } html.dark #mesutstore-theme-toggle { color: #FCD34D; /* amber-300 — sun color in dark mode */ } /* ── Loading overlay dark ────────────────────────────────────────────────────── */ html.dark #mesutstore-loading-overlay { background-color: rgba(15, 23, 42, 0.7) !important; } /* ── Tags / badges ───────────────────────────────────────────────────────────── */ html.dark .bg-gray-100 { background-color: var(--color-surface-alt) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ /* Footer is already navy-900 bg so minimal changes needed */ html.dark footer { border-top-color: var(--color-border); }