/* root sets the active theme; we’ll toggle [data-theme="…"] on */ :root{ /* defaults (used as fallback) */ --bg: #0b0f14; --fg: #e6ecf2; --muted: #9aa8b6; --panel: #101319; --panel-border: #262d36; --accent: #7dc4ff; --accent-2: #ff7dc4; --shadow-inset: 0 1px 0 #0b0e12 inset; --accent-stroke: #892600; --glow-color: #ffffff; } /* DARK (default) */ html[data-theme="dark"]{ --theme-emoji: "🌙"; --theme-icon: url("assets/img/theme/dark/dark_theme_icon.png"); --bg: #0b0f14; --fg: #e6ecf2; --muted: #9aa8b6; --panel: #101319; --panel-border: #262d36; --accent: #7dc4ff; --accent-2: #ff7dc4; --button: #a8bfd3; --accent-stroke: #4e42aa; --shadow-color: #ffffff; } /* LIGHT */ html[data-theme="light"]{ --theme-emoji: "☀️"; --theme-icon: url("assets/img/theme/light/light_theme_icon.png"); --bg: #fafbfc; --fg: #0b0f14; --muted: #6b4944; --panel: #ffd5a2; --panel-border: #ff9400; --accent: #ff7400; --accent-2: #35b19e; --button: #ea7a3d; --accent-stroke: #df551b; --shadow-color: #52183c; } /* SPOOKY (fun seasonal) */ html[data-theme="spooky"]{ --theme-emoji: "🎃"; --theme-icon: url("assets/img/theme/spooky/spooky_theme_icon.png"); --bg: #0b0a0f; --fg: #daf6ea; --muted: #8ab99d; --panel: #161318; --panel-border: #2a2330; --accent: #ff7a17; /* pumpkin */ --accent-2: #7e49ff; /* eerie purple */ --button: #00ff88; --accent-stroke: #006e4c; --shadow-color: #ffffff; } /* hook your site’s common surfaces to variables (safe overrides) */ body{ background: var(--bg); color: var(--fg); } .reader .nav-row, .tx-wrap{ background: var(--panel); } .nav-btn{ background-color: var(--button); color: var(--bg); } a, .nav-btn:hover{ color: var(--accent-2); } /* transcript readability tweak you can keep */ .tx-head{ color: var(--fg); } .tx-box{ color: var(--fg); } /* floating theme button */ .theme-switch{ display: flex; position: fixed; justify-self: end; float: right; top: 32px; z-index: 243; margin: 6px 32px 0 0; width: 64px; height: 64px; border-radius: 32px; border: hidden; background: transparent; color: var(--fg); cursor: pointer; transition: transform .08s ease; filter: drop-shadow(0 0 32px var(--)); } .theme-switch:hover{ transform: translateY(-4px); } .theme-switch:active{ transform: translateY(0); } /* the icon behind the label */ .theme-icon{ position: absolute; left: 25%; top: -27%; width: 64px; /* adjust size */ height: 96px; object-fit: contain; pointer-events: none; z-index: 1; /* UNDER the label */ opacity: .98; } /* label on top */ .theme-label{ position: relative; z-index: 2; /* ABOVE the icon */ font-family: grapeSoda; font-size: 32px; /* tweak */ color: #fff; text-shadow: -1px -1px 0 var(--accent-stroke), 0 -1px 0 var(--accent-stroke), 1px -1px 0 var(--accent-stroke), 1px 0 0 var(--accent-stroke), 1px 1px 0 var(--accent-stroke), 0 1px 0 var(--accent-stroke), -1px 1px 0 var(--accent-stroke), -1px 0 0 var(--accent-stroke), 0 0 2px var(--accent-stroke), 0 0 4px var(--accent-stroke), 0 0 14px var(--accent-stroke) ; }