avi/Keynctr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename glass theme display to Aurora; fix unreadable select options

Browse source 
The theme dropdown popup inherited the near-transparent select
background and rendered white-on-white under the glass theme.
Options now get an explicit dark surface, plus color-scheme: dark
so native controls render correctly. User-facing name is Aurora;
the internal 'glass' id is unchanged so saved settings keep working.
This commit is contained in:
Avi 2026-08-24 19:49:30 -05:00
commit dd50b24ec1
2 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/screens/SettingsScreen.tsx
View file

@ -104,11 +104,11 @@ export function SettingsScreen() {
>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="glass">Glass</option>
<option value="glass">Aurora</option>
<option value="neon">Neon</option>
</select>
<p className="hint">
“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.
</p>
</div>

17
frontend/src/styles.css
View file

@ -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 <body>; 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);