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="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="glass">Glass</option> <option value="glass">Aurora</option>
<option value="neon">Neon</option> <option value="neon">Neon</option>
</select> </select>
<p className="hint"> <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. themes with distinctive color palettes.
</p> </p>
</div> </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); --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 /* "Aurora" theme (internal id "glass") — frosted-glass aesthetic inspired
(MIT): translucent blurred panels floating over an aurora-lit deep by the Meridian Obsidian theme (MIT): translucent blurred panels floating
blue-black field, cyan accents, hairline light borders. */ over an aurora-lit deep blue-black field, cyan accents, hairline light
borders. */
:root[data-theme='glass'] { :root[data-theme='glass'] {
--bg: #0a0d13; --bg: #0a0d13;
--surface: rgba(23, 29, 41, 0.58); --surface: rgba(23, 29, 41, 0.58);
@ -114,8 +115,8 @@
--focus: #7fdbff; --focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.38); --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; --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 /* Glass scene: the aurora backdrop lives on <body>; panels above it are
translucent and blurred so the glow reads through them. */ translucent and blurred so the glow reads through them. */
html[data-theme='glass'] body { html[data-theme='glass'] body {
@ -150,6 +151,14 @@ html[data-theme='glass'] textarea {
border-color: rgba(255, 255, 255, 0.16); 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 { html[data-theme='glass'] .modal-backdrop {
background: rgba(4, 7, 12, 0.5); background: rgba(4, 7, 12, 0.5);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);