diff --git a/frontend/src/screens/SettingsScreen.tsx b/frontend/src/screens/SettingsScreen.tsx index a107a98..0db240f 100644 --- a/frontend/src/screens/SettingsScreen.tsx +++ b/frontend/src/screens/SettingsScreen.tsx @@ -104,11 +104,11 @@ export function SettingsScreen() { > - +

- “Light” and “Dark” follow your manual selection. “Glass” and “Neon” are aesthetic + “Light” and “Dark” follow your manual selection. “Aurora” and “Neon” are aesthetic themes with distinctive color palettes.

diff --git a/frontend/src/styles.css b/frontend/src/styles.css index c2c7acb..947ee5e 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -87,9 +87,10 @@ --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 20, 147, 0.12); } -/* "Glass" — frosted-glass aesthetic inspired by the Meridian Obsidian theme - (MIT): translucent blurred panels floating over an aurora-lit deep - blue-black field, cyan accents, hairline light borders. */ +/* "Aurora" theme (internal id "glass") — frosted-glass aesthetic inspired + by the Meridian Obsidian theme (MIT): translucent blurred panels floating + over an aurora-lit deep blue-black field, cyan accents, hairline light + borders. */ :root[data-theme='glass'] { --bg: #0a0d13; --surface: rgba(23, 29, 41, 0.58); @@ -114,8 +115,8 @@ --focus: #7fdbff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.38); --shadow-modal: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset; + color-scheme: dark; } - /* Glass scene: the aurora backdrop lives on ; panels above it are translucent and blurred so the glow reads through them. */ html[data-theme='glass'] body { @@ -150,6 +151,14 @@ html[data-theme='glass'] textarea { border-color: rgba(255, 255, 255, 0.16); } +/* The native select popup inherits the select's near-transparent + background, which renders white with light text — give options an + explicit dark surface so entries stay readable. */ +html[data-theme='glass'] select option { + background-color: #141a26; + color: var(--text); +} + html[data-theme='glass'] .modal-backdrop { background: rgba(4, 7, 12, 0.5); -webkit-backdrop-filter: blur(6px);