diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index f8e3884..08455e1 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -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'; diff --git a/frontend/src/screens/SettingsScreen.tsx b/frontend/src/screens/SettingsScreen.tsx index c5c8ae2..a107a98 100644 --- a/frontend/src/screens/SettingsScreen.tsx +++ b/frontend/src/screens/SettingsScreen.tsx @@ -104,11 +104,12 @@ export function SettingsScreen() { > +

- “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.

diff --git a/frontend/src/state/AppProvider.tsx b/frontend/src/state/AppProvider.tsx index d910afe..d7a5c5d 100644 --- a/frontend/src/state/AppProvider.tsx +++ b/frontend/src/state/AppProvider.tsx @@ -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; diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 61bdf7d..9708f92 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -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); } * { diff --git a/src/main.rs b/src/main.rs index 6a66b31..c919b04 100644 --- a/src/main.rs +++ b/src/main.rs @@ -35,7 +35,7 @@ Commands: relays disable Disable a relay relays test Test a relay connection settings get Show application settings - settings set theme + settings set theme settings set confirm settings set shorten delete-profile Delete a profile (moves it to undo stack) diff --git a/src/settings.rs b/src/settings.rs index 7293ee0..7af6ffe 100644 --- a/src/settings.rs +++ b/src/settings.rs @@ -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, }