/* ============================================ * Magic Darkroom · Background Themes * * Each theme overrides the aurora background tokens * (consumed by theme/background.css) plus the hero * text colors that sit directly on the background. * * Switch by setting data-theme on : * * Defaults (no attribute) = the "terracotta" theme below. * * Token contract: * --bg-base / --bg-glow base canvas + top glow * --bg-blob-1..4 mesh blob colors * --bg-blend blend mode (multiply on * light themes, screen on dark) * --bg-blob-opacity blob strength * --bg-stars-opacity starfield visibility (0 hides) * --c-hero / --c-hero-sub title + overline color * ============================================ */ :root { /* ---- Theme: 暖陶 terracotta (default) ---- * Selecting "terracotta" in the switcher just removes any data-theme * override, so these :root values ARE the terracotta theme. */ --bg-base: #ecd2b6; --bg-glow: #f4e2cd; --bg-blob-1: #f1c6a2; --bg-blob-2: #ebccab; --bg-blob-3: #e6bfcb; --bg-blob-4: #d6c69b; --bg-blend: multiply; --bg-blob-opacity: 0.6; --bg-stars-opacity: 0; --c-hero: var(--c-text-h); --c-hero-sub: var(--c-text-2); } /* The three themes below are all light, so they only override the * aurora colors and inherit blend/opacity/stars/hero from :root. */ /* ---- Theme: 晴空 sky (cool periwinkle blue) ---- */ html[data-theme="sky"] { --bg-base: #d6e2f2; --bg-glow: #e8effb; --bg-blob-1: #b6cbf0; --bg-blob-2: #cdd9f6; --bg-blob-3: #c0e0f2; --bg-blob-4: #f3dde7; } /* ---- Theme: 薄荷 mint (cool sage green) ---- */ html[data-theme="mint"] { --bg-base: #cfe3d6; --bg-glow: #e0efe5; --bg-blob-1: #a6d6c4; --bg-blob-2: #c6e2d2; --bg-blob-3: #bce0da; --bg-blob-4: #ecdfc4; } /* ---- Theme: 薰衣草 lavender (soft purple) ---- */ html[data-theme="lavender"] { --bg-base: #e1d9ef; --bg-glow: #efe9f9; --bg-blob-1: #c7baec; --bg-blob-2: #d6ccf1; --bg-blob-3: #e6d1ee; --bg-blob-4: #f4ddd1; } /* ============================================ * Theme switcher (floating, top-right) * ============================================ */ .md-theme-switch { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; gap: 10px; padding: 7px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(42, 42, 42, 0.12); } .md-theme-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0; transition: transform 0.18s var(--ease-pop, ease), box-shadow 0.18s ease; } .md-theme-dot[data-set-theme="terracotta"] { background: linear-gradient(135deg, #f1c6a2, #e6bfcb); } .md-theme-dot[data-set-theme="sky"] { background: linear-gradient(135deg, #b6cbf0, #c0e0f2); } .md-theme-dot[data-set-theme="mint"] { background: linear-gradient(135deg, #a6d6c4, #bce0da); } .md-theme-dot[data-set-theme="lavender"] { background: linear-gradient(135deg, #c7baec, #e6d1ee); } .md-theme-dot:hover { transform: scale(1.12); } .md-theme-dot.is-active { transform: scale(1.18); box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--c-hero); } @media (prefers-reduced-motion: reduce) { .md-theme-dot { transition: none; } }