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

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

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. */ /** Lifecycle of the NIP-46 remote signer. */
export type SignerPhase = 'stopped' | 'connecting' | 'connected'; export type SignerPhase = 'stopped' | 'connecting' | 'connected';

View file

@ -104,11 +104,12 @@ 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="neon">Neon</option> <option value="neon">Neon</option>
</select> </select>
<p className="hint"> <p className="hint">
“Light” and “Dark” follow your manual selection. “Neon” is a pure-black theme with “Light” and “Dark” follow your manual selection. “Glass” and “Neon” are aesthetic
pink and purple accents. themes with distinctive color palettes.
</p> </p>
</div> </div>
</div> </div>

View file

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

View file

@ -62,29 +62,678 @@
Obsidian theme (MIT): black panels, deep-pink primary (#ff1493), purple Obsidian theme (MIT): black panels, deep-pink primary (#ff1493), purple
secondary (#8b00ff family), yellow highlights (#ffd700). */ secondary (#8b00ff family), yellow highlights (#ffd700). */
:root[data-theme='neon'] { :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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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; --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); --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); --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);
} }
* { * {

View file

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

View file

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