diff --git a/src/lib/look.ts b/src/lib/look.ts index 2015cc96..ba496d19 100644 --- a/src/lib/look.ts +++ b/src/lib/look.ts @@ -1,6 +1,7 @@ export type LookPreset = | 'classic' | 'graphite' + | 'midnight' | 'indigo' | 'ember' | 'glacier' @@ -24,6 +25,11 @@ export const LOOK_PRESETS: LookPresetOption[] = [ label: 'Graphite', description: 'Cool neon blue with subtle glow', }, + { + id: 'midnight', + label: 'Midnight', + description: 'Graphite with pure black terminals', + }, { id: 'classic', label: 'Classic', diff --git a/src/lib/monaco-theme.ts b/src/lib/monaco-theme.ts index dbda11ec..ce624a55 100644 --- a/src/lib/monaco-theme.ts +++ b/src/lib/monaco-theme.ts @@ -29,6 +29,14 @@ const presetColors: Record = { border: '#2e3e50', accent: '#2ec8ff', }, + midnight: { + bgElevated: '#000000', + fg: '#d7e4f0', + fgMuted: '#9bb0c3', + fgSubtle: '#678197', + border: '#2e3e50', + accent: '#2ec8ff', + }, indigo: { bgElevated: '#1c2038', fg: '#deddff', diff --git a/src/lib/theme.ts b/src/lib/theme.ts index b0b6c1dc..2e953f0f 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -43,6 +43,7 @@ export const theme = { const terminalBackground: Record = { classic: '#2d2e32', graphite: '#1c2630', + midnight: '#000000', indigo: '#1c2038', ember: '#211918', glacier: '#232e3a', diff --git a/src/styles.css b/src/styles.css index 6778cd80..03236683 100644 --- a/src/styles.css +++ b/src/styles.css @@ -171,6 +171,29 @@ html[data-look='graphite'] { --task-panel-bg: #1c2630; } +html[data-look='midnight'] { + --bg: radial-gradient(130% 120% at 15% 0%, #253848 0%, #141c26 60%, #101418 100%); + --bg-elevated: #1c2630; + --bg-input: #19232e; + --bg-hover: #253240; + --bg-selected: #1c3e55; + --bg-selected-subtle: #1c3e5540; + --border: #2e3e50; + --border-subtle: #222e3a; + --border-focus: #2ec8ff; + --fg: #d7e4f0; + --fg-muted: #9bb0c3; + --fg-subtle: #678197; + --accent: #2ec8ff; + --accent-hover: #59d7ff; + --accent-text: #031018; + --link: #73dfff; + --island-bg: #192028; + --island-border: #2e3e50; + --task-container-bg: #161e28; + --task-panel-bg: #000000; +} + html[data-look='indigo'] { --bg: radial-gradient(130% 120% at 18% 0%, #202044 0%, #171c30 58%, #12151f 100%); --bg-elevated: #1c2038;