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

Theme: add glass theme (CAJAFUERTE-inspired) alongside light/dark/neon

Browse source
This commit is contained in:
Avi 2026-08-24 14:34:35 -05:00
commit db2d22f999
6 changed files with 658 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/types.ts
View file

@ -1,4 +1,4 @@
export type Theme = 'light' | 'dark' | 'neon';
export type Theme = 'light' | 'dark' | 'glass' | 'neon';
/** Lifecycle of the NIP-46 remote signer. */
export type SignerPhase = 'stopped' | 'connecting' | 'connected';

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

@ -104,11 +104,12 @@ export function SettingsScreen() {
>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="glass">Glass</option>
<option value="neon">Neon</option>
</select>
<p className="hint">
“Light” and “Dark” follow your manual selection. “Neon” is a pure-black theme with
pink and purple accents.
“Light” and “Dark” follow your manual selection. “Glass” and “Neon” are aesthetic
themes with distinctive color palettes.
</p>
</div>
</div>

4
frontend/src/state/AppProvider.tsx
View file

@ -337,8 +337,8 @@ export function useApp(): AppContextValue {
/** Apply the requested theme. */
export function applyTheme(theme: Theme): void {
if (theme === 'neon') {
document.documentElement.dataset.theme = 'neon';
if (theme === 'glass' || theme === 'neon') {
document.documentElement.dataset.theme = theme;
return;
}
document.documentElement.dataset.theme = theme;

649
frontend/src/styles.css
View file

@ -62,29 +62,678 @@
Obsidian theme (MIT): black panels, deep-pink primary (#ff1493), purple
secondary (#8b00ff family), yellow highlights (#ffd700). */
:root[data-theme='neon'] {
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--bg: #000000;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--surface: #0b0b0e;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--surface-2: #131318;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--surface-hover: #191921;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--border: #2b1224;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--border-strong: #4d1c3d;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--text: #f5f2f7;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--text-muted: #a89bb0;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--primary: #ff1493;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--primary-hover: #ff4fb0;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--primary-soft: #2b0a1e;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--on-primary: #ffffff;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--danger: #ff3355;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--danger-soft: #330810;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--warning: #ffd700;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--warning-soft: #332b03;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--success: #00e68a;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--success-soft: #04301f;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--info: #b388ff;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--info-soft: #1c1035;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--focus: #ff1493;
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(255, 20, 147, 0.07);
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 20, 147, 0.12);
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
}
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}
* {

2
src/main.rs
View file

@ -35,7 +35,7 @@ Commands:
relays disable <url> Disable a relay
relays test <url> Test a relay connection
settings get Show application settings
settings set theme <light|dark|neon>
settings set theme <light|dark|glass|neon>
settings set confirm <true|false>
settings set shorten <true|false>
delete-profile <npub> Delete a profile (moves it to undo stack)

2
src/settings.rs
View file

@ -22,6 +22,7 @@ impl RelayConfig {
pub enum Theme {
Light,
Dark,
Glass,
Neon,
}
@ -31,6 +32,7 @@ impl Theme {
match s {
"light" => Some(Self::Light),
"dark" => Some(Self::Dark),
"glass" => Some(Self::Glass),
"neon" => Some(Self::Neon),
_ => None,
}