/* ============================================================ ThreadsHub — Theme system (Light [default] · Dark · Glass) Applied via . Works for storefront + admin. ============================================================ */ /* Smooth transition when switching themes */ html[data-theme] body, html[data-theme] .bg-white, html[data-theme] .site-nav, html[data-theme] .mobile-bottom-nav { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ============================================================ DARK THEME ============================================================ */ html[data-theme="dark"] { --color-cream: #16161c; --color-gray-light: #16161c; --color-gray-mid: #2c2c34; --color-text-dark: #ececf0; --color-text-muted: #9a9aa8; color-scheme: dark; } html[data-theme="dark"] body { background: #0e0e12; color: #ececf0; } /* Serif section headings default to near-black (var(--color-primary)); force light in dark mode. !important beats the inline color on these headings. */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .section-heading__title { color: #f2f2f6 !important; } /* Outline buttons/pills that draw text+border with the primary colour */ html[data-theme="dark"] [style*="--color-primary"] { color: #ececf0 !important; border-color: #3a3a44 !important; } /* Generic surface / text utility overrides (Tailwind CDN classes) */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: #17171d !important; } html[data-theme="dark"] .bg-gray-900, html[data-theme="dark"] .bg-black { background-color: #000 !important; } html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-gray-800 { color: #f2f2f6 !important; } html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600 { color: #c6c6d2 !important; } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: #90909e !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-t, html[data-theme="dark"] .border-b, html[data-theme="dark"] [class*="border-gray"] { border-color: #2a2a33 !important; } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #101015 !important; border-color: #2f2f3a !important; color: #ececf0 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b6b78 !important; } /* Storefront components */ html[data-theme="dark"] .site-nav.solid, html[data-theme="dark"] .site-nav.scrolled { background: rgba(16,16,20,0.96) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06); } html[data-theme="dark"] .site-nav.solid .logo-text, html[data-theme="dark"] .site-nav.scrolled .logo-text, html[data-theme="dark"] .site-nav.solid .nav-links a, html[data-theme="dark"] .site-nav.scrolled .nav-links a, html[data-theme="dark"] .site-nav.solid .nav-icon-btn, html[data-theme="dark"] .site-nav.scrolled .nav-icon-btn { color: #ececf0; } html[data-theme="dark"] .site-nav.solid .hamburger span, html[data-theme="dark"] .site-nav.scrolled .hamburger span { background: #ececf0; } html[data-theme="dark"] .nav-icon-btn:hover { background: rgba(255,255,255,0.08); } html[data-theme="dark"] .mobile-bottom-nav { background: rgba(16,16,20,0.96); border-top-color: #2a2a33; } html[data-theme="dark"] .mobile-nav-drawer { background: #16161c; border-top-color: #2a2a33; } html[data-theme="dark"] .mobile-nav-drawer a { color: #ececf0; border-bottom-color: #24242c; } html[data-theme="dark"] .th-product-card__image-wrap, html[data-theme="dark"] .th-product-card__placeholder { background: #1c1c24; } html[data-theme="dark"] .category-tile__bg:not([style]) { filter: brightness(0.9); } /* Admin sidebar stays dark; adjust admin content surfaces */ html[data-theme="dark"] .admin-topbar { background: #16161c !important; border-bottom-color: #2a2a33 !important; } html[data-theme="dark"] main.bg-gray-50 { background: #0e0e12 !important; } /* ============================================================ GLASS THEME — frosted translucent surfaces over a soft gradient ============================================================ */ html[data-theme="glass"] { --color-gray-light: rgba(255,255,255,0.55); --color-text-dark: #1c2230; --color-text-muted: #55607a; color-scheme: light; } html[data-theme="glass"] body { color: #1c2230; background: linear-gradient(135deg, #dbe4ff 0%, #f3e7ff 45%, #ffe9f0 100%) fixed; } /* Frost every card / panel */ html[data-theme="glass"] .bg-white, html[data-theme="glass"] .bg-gray-50, html[data-theme="glass"] .bg-gray-100 { background-color: rgba(255,255,255,0.45) !important; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,0.6) !important; box-shadow: 0 8px 32px rgba(31,38,88,0.12); } html[data-theme="glass"] [class*="border-gray"] { border-color: rgba(255,255,255,0.55) !important; } html[data-theme="glass"] .text-gray-900, html[data-theme="glass"] .text-black { color: #1c2230 !important; } html[data-theme="glass"] .text-gray-500, html[data-theme="glass"] .text-gray-400 { color: #5b6480 !important; } html[data-theme="glass"] input, html[data-theme="glass"] textarea, html[data-theme="glass"] select { background-color: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.7) !important; } /* Storefront glass nav */ html[data-theme="glass"] .site-nav.solid, html[data-theme="glass"] .site-nav.scrolled { background: rgba(255,255,255,0.35) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 20px rgba(31,38,88,0.08); } html[data-theme="glass"] .mobile-bottom-nav { background: rgba(255,255,255,0.5) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } html[data-theme="glass"] .mobile-nav-drawer { background: rgba(255,255,255,0.75); backdrop-filter: blur(16px); } /* Admin in glass */ html[data-theme="glass"] main.bg-gray-50 { background: transparent !important; } html[data-theme="glass"] .admin-topbar { background: rgba(255,255,255,0.4) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } /* ============================================================ THEME TOGGLE control (shared) ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer; color: inherit; transition: background .15s; } .theme-toggle:hover { background: rgba(128,128,128,0.15); } .theme-toggle .theme-ico { display: none; } html[data-theme="light"] .theme-toggle .theme-ico-light, html:not([data-theme]) .theme-toggle .theme-ico-light, html[data-theme="dark"] .theme-toggle .theme-ico-dark, html[data-theme="glass"] .theme-toggle .theme-ico-glass { display: inline-block; } /* ============================================================ ADMIN PANEL — mobile responsiveness + dark/glass theming The older admin pages use inline styles, so we target common inline patterns. Scoped to .admin-ui so the storefront is untouched. ============================================================ */ /* ---- Mobile ---- */ @media (max-width: 768px) { .admin-ui main { padding: 16px !important; } /* Tables scroll horizontally instead of overflowing the viewport */ .admin-ui main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Collapse inline multi-column grids into a single column */ .admin-ui [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* …but keep size/stock/remove rows inline (must come after the rule above) */ .admin-ui [style*="1fr 1fr auto"] { grid-template-columns: 1fr 1fr auto !important; } /* Header rows (title + action button) wrap instead of squashing */ .admin-ui [style*="justify-content: space-between"] { flex-wrap: wrap; gap: 12px; } .admin-ui [style*="padding: 24px"] { padding: 16px !important; } .admin-ui [style*="padding: 32px"] { padding: 16px !important; } } /* ---- Dark theme: recolour common inline light surfaces ---- */ html[data-theme="dark"] .admin-ui [style*="background: #ffffff"], html[data-theme="dark"] .admin-ui [style*="background:#ffffff"], html[data-theme="dark"] .admin-ui [style*="background: #fff;"], html[data-theme="dark"] .admin-ui [style*="background:#fff;"] { background-color: #17171d !important; } html[data-theme="dark"] .admin-ui [style*="background: #f9fafb"], html[data-theme="dark"] .admin-ui [style*="background:#f9fafb"], html[data-theme="dark"] .admin-ui th[style*="#f9fafb"], html[data-theme="dark"] .admin-ui tr[style*="#f9fafb"] { background-color: #101015 !important; } html[data-theme="dark"] .admin-ui [style*="background: #f3f4f6"], html[data-theme="dark"] .admin-ui [style*="background:#f3f4f6"] { background-color: #22222a !important; } html[data-theme="dark"] .admin-ui [style*="color: #111827"], html[data-theme="dark"] .admin-ui [style*="color:#111827"], html[data-theme="dark"] .admin-ui [style*="color: #374151"], html[data-theme="dark"] .admin-ui [style*="color:#374151"] { color: #e8e8ee !important; } html[data-theme="dark"] .admin-ui [style*="color: #6b7280"], html[data-theme="dark"] .admin-ui [style*="color:#6b7280"], html[data-theme="dark"] .admin-ui [style*="color: #9ca3af"], html[data-theme="dark"] .admin-ui [style*="color:#9ca3af"] { color: #9a9aa8 !important; } html[data-theme="dark"] .admin-ui [style*="1px solid #e5e7eb"], html[data-theme="dark"] .admin-ui [style*="1px solid #f3f4f6"], html[data-theme="dark"] .admin-ui [style*="border-top: 1px solid"], html[data-theme="dark"] .admin-ui [style*="border-bottom: 1px solid"] { border-color: #2a2a33 !important; } html[data-theme="dark"] .admin-ui input, html[data-theme="dark"] .admin-ui select, html[data-theme="dark"] .admin-ui textarea { background-color: #101015 !important; border-color: #2f2f3a !important; color: #e8e8ee !important; } /* ---- Glass theme: frost the inline white cards ---- */ html[data-theme="glass"] .admin-ui [style*="background: #ffffff"], html[data-theme="glass"] .admin-ui [style*="background:#ffffff"], html[data-theme="glass"] .admin-ui [style*="background: #fff;"] { background-color: rgba(255,255,255,0.55) !important; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(255,255,255,0.6) !important; }