diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte index 0a9db9b..04521e7 100644 --- a/src/lib/components/ThemeSwitcher.svelte +++ b/src/lib/components/ThemeSwitcher.svelte @@ -10,6 +10,10 @@ label: "Dark", themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"], }, + { + label: "Light", + themes: ["githubLight", "solarizedLight", "oneLight"], + }, { label: "Warm", themes: ["gruvbox"], @@ -18,6 +22,20 @@ label: "Cool", themes: ["nord", "oneDark"], }, + { + label: "Fun", + themes: [ + "bubblegum", + "rosePine", + "cottonCandy", + "synthwave", + "candyfloss", + ], + }, + { + label: "Retro", + themes: ["terminal", "amber", "ibmPC"], + }, { label: "Accessibility", themes: ["highContrast"], @@ -135,6 +153,29 @@ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 100; min-width: 200px; + max-height: 400px; + overflow-y: auto; + scroll-behavior: smooth; + scrollbar-width: thin; + scrollbar-color: var(--surface2) var(--surface0); + } + + .theme-menu::-webkit-scrollbar { + width: 8px; + } + + .theme-menu::-webkit-scrollbar-track { + background: var(--surface0); + border-radius: 4px; + } + + .theme-menu::-webkit-scrollbar-thumb { + background: var(--surface2); + border-radius: 4px; + } + + .theme-menu::-webkit-scrollbar-thumb:hover { + background: var(--overlay0); } .theme-option { diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/ToolBar.svelte index bd4de08..a673546 100644 --- a/src/lib/components/ToolBar.svelte +++ b/src/lib/components/ToolBar.svelte @@ -176,11 +176,16 @@ .search-input { width: 240px; padding: 6px 12px; - border: 1px solid var(--surface0); + border: 1px solid var(--surface1); border-radius: 6px; - font-size: 13px; - background-color: var(--crust); + font-size: 12px; + background-color: var(--surface0); color: var(--text); + transition: all 0.2s ease; + } + + .search-input:hover { + background-color: var(--surface1); } .search-input:focus { @@ -195,7 +200,7 @@ border: 1px solid var(--surface1); border-radius: 6px; color: var(--text); - font-size: 13px; + font-size: 12px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; diff --git a/src/lib/styles/index.ts b/src/lib/styles/index.ts index e60c5ab..b327c87 100644 --- a/src/lib/styles/index.ts +++ b/src/lib/styles/index.ts @@ -29,7 +29,7 @@ export interface Theme { export const themes: Record = { catppuccin: { name: 'catppuccin', - label: 'Catppuccin Mocha', + label: 'Catppuccin', colors: { base: '#1e1e2e', mantle: '#181825', @@ -243,4 +243,301 @@ export const themes: Record = { teal: '#00ffcc', // Bright teal for special actions }, }, + githubLight: { + name: 'githubLight', + label: 'GitHub Light', + colors: { + base: '#ffffff', + mantle: '#f6f8fa', + crust: '#eaeef2', + text: '#24292f', + subtext0: '#57606a', + subtext1: '#6e7781', + surface0: '#f3f6fa', + surface1: '#eaeef2', + surface2: '#d0d7de', + overlay0: '#8c959f', + overlay1: '#6e7781', + blue: '#0969da', + lavender: '#8250df', + sapphire: '#0550ae', + sky: '#218bff', + red: '#cf222e', + maroon: '#a40e26', + peach: '#bc4c00', + yellow: '#9a6700', + green: '#1a7f37', + teal: '#0969da', + }, + }, + solarizedLight: { + name: 'solarizedLight', + label: 'Solarized Light', + colors: { + base: '#fdf6e3', + mantle: '#eee8d5', + crust: '#e4dcc9', + text: '#657b83', + subtext0: '#839496', + subtext1: '#93a1a1', + surface0: '#f7f2e4', + surface1: '#eee8d5', + surface2: '#dcd4c4', + overlay0: '#93a1a1', + overlay1: '#839496', + blue: '#268bd2', + lavender: '#6c71c4', + sapphire: '#2aa198', + sky: '#2aa198', + red: '#dc322f', + maroon: '#cb4b16', + peach: '#cb4b16', + yellow: '#b58900', + green: '#859900', + teal: '#2aa198', + }, + }, + oneLight: { + name: 'oneLight', + label: 'One Light', + colors: { + base: '#fafafa', + mantle: '#f0f0f0', + crust: '#e5e5e5', + text: '#383a42', + subtext0: '#4f525e', + subtext1: '#696c77', + surface0: '#f2f2f2', + surface1: '#e5e5e5', + surface2: '#d4d4d4', + overlay0: '#a0a1a7', + overlay1: '#696c77', + blue: '#4078f2', + lavender: '#a626a4', + sapphire: '#0184bc', + sky: '#0997b3', + red: '#e45649', + maroon: '#ca1243', + peach: '#d75f00', + yellow: '#c18401', + green: '#50a14f', + teal: '#0184bc', + }, + }, + bubblegum: { + name: 'bubblegum', + label: 'Bubblegum', + colors: { + base: '#ff9ac1', // Light pink background + mantle: '#ffa7cc', // Slightly darker pink + crust: '#ffb4d8', // Even darker pink for depth + text: '#2d1c2d', // Dark purple text + subtext0: '#4b384b', // Medium purple for secondary text + subtext1: '#5c465c', // Lighter purple for tertiary text + surface0: '#ffc1e0', // Light pink surface + surface1: '#ffcee7', // Lighter pink surface + surface2: '#ffdaf0', // Even lighter pink surface + overlay0: '#7e5c7e', // Muted purple overlay + overlay1: '#6e4f6e', // Darker purple overlay + blue: '#7287fd', // Soft blue + lavender: '#b4befe', // Soft lavender + sapphire: '#89dceb', // Soft cyan + sky: '#89dceb', // Matching cyan + red: '#ff8089', // Soft red + maroon: '#ff9999', // Soft maroon + peach: '#ffb4a1', // Soft peach + yellow: '#ffe5a0', // Soft yellow + green: '#a6e3a1', // Soft green + teal: '#94e2d5', // Soft teal + }, + }, + rosePine: { + name: 'rosePine', + label: 'Rosé Pine', + colors: { + base: '#191724', // Deep purple base + mantle: '#1f1d2e', // Slightly lighter purple + crust: '#26233a', // Even lighter purple + text: '#e0def4', // Soft white text + subtext0: '#908caa', // Muted purple text + subtext1: '#6e6a86', // Darker muted text + surface0: '#2a2837', // Surface purple + surface1: '#343145', // Lighter surface + surface2: '#3e3b54', // Even lighter surface + overlay0: '#524f67', // Overlay purple + overlay1: '#6e6a86', // Lighter overlay + blue: '#9ccfd8', // Soft blue + lavender: '#c4a7e7', // Soft lavender + sapphire: '#31748f', // Deep blue + sky: '#9ccfd8', // Light blue + red: '#eb6f92', // Soft pink + maroon: '#ebbcba', // Soft rose + peach: '#f6c177', // Soft peach + yellow: '#f6c177', // Gold + green: '#31748f', // Sage + teal: '#9ccfd8', // Soft teal + }, + }, + cottonCandy: { + name: 'cottonCandy', + label: 'Cotton Candy', + colors: { + base: '#f5d1eb', // Light pink + mantle: '#f7d7ee', // Slightly darker pink + crust: '#fae1f3', // Even darker pink + text: '#2d0c3a', // Deep purple text + subtext0: '#4a1259', // Medium purple text + subtext1: '#671878', // Light purple text + surface0: '#f9def1', // Surface pink + surface1: '#fde9f5', // Lighter surface + surface2: '#fff2fa', // Even lighter surface + overlay0: '#b87dd3', // Purple overlay + overlay1: '#9c5fb8', // Darker overlay + blue: '#79c7ff', // Baby blue + lavender: '#d5a6ff', // Soft purple + sapphire: '#7cb8ff', // Light blue + sky: '#89dcff', // Bright blue + red: '#ff9ed2', // Soft pink + maroon: '#ff8ac4', // Darker pink + peach: '#ffb2c7', // Peachy pink + yellow: '#ffffc2', // Pastel yellow + green: '#b6ffd7', // Mint green + teal: '#89ffea', // Turquoise + }, + }, + synthwave: { + name: 'synthwave', + label: 'Synthwave', + colors: { + base: '#2b213a', // Deep purple + mantle: '#2f2444', // Slightly lighter purple + crust: '#33274f', // Even lighter purple + text: '#ff7edb', // Neon pink text + subtext0: '#e58ee0', // Softer pink text + subtext1: '#cb9ee6', // Lavender text + surface0: '#392662', // Surface purple + surface1: '#443773', // Lighter surface + surface2: '#504785', // Even lighter surface + overlay0: '#625997', // Purple overlay + overlay1: '#7267aa', // Lighter overlay + blue: '#36f9f6', // Cyan + lavender: '#ff7edb', // Pink + sapphire: '#72f1b8', // Mint + sky: '#36f9f6', // Bright cyan + red: '#fe4450', // Hot red + maroon: '#ff558f', // Hot pink + peach: '#ff8b39', // Orange + yellow: '#fede5d', // Yellow + green: '#72f1b8', // Neon green + teal: '#36f9f6', // Bright teal + }, + }, + candyfloss: { + name: 'candyfloss', + label: 'Candyfloss', + colors: { + base: '#f8e2ff', // Light purple + mantle: '#ffe2f8', // Pink tint + crust: '#ffe9f3', // Lighter pink + text: '#5c1b99', // Deep purple text + subtext0: '#7a3aaf', // Medium purple text + subtext1: '#944bc6', // Light purple text + surface0: '#ffeaf8', // Surface pink + surface1: '#fff2fb', // Lighter surface + surface2: '#fff7fd', // Even lighter surface + overlay0: '#d59bff', // Purple overlay + overlay1: '#c77dff', // Darker overlay + blue: '#79baff', // Soft blue + lavender: '#cc8fff', // Light purple + sapphire: '#85a5ff', // Periwinkle + sky: '#8aceff', // Light blue + red: '#ff8fab', // Soft red + maroon: '#ff7fa6', // Pink + peach: '#ffb2c7', // Peach + yellow: '#fff3b2', // Soft yellow + green: '#b8ffda', // Mint + teal: '#8affef', // Aqua + }, + }, + terminal: { + name: 'terminal', + label: 'Green Terminal', + colors: { + base: '#0D1117', // Deep black background + mantle: '#161B22', // Slightly lighter black + crust: '#1B2127', // Terminal border color + text: '#00FF00', // Classic terminal green + subtext0: '#00D700', // Dimmer green + subtext1: '#00BB00', // Even dimmer green + surface0: '#1C2128', // Slightly lifted surface + surface1: '#21262D', // Terminal input area + surface2: '#282E35', // Selected area + overlay0: '#008800', // Darker green for overlays + overlay1: '#006600', // Even darker green + blue: '#00FF00', // Keep everything in green shades + lavender: '#00FF66', // Slight variation + sapphire: '#00DD88', // Another variation + sky: '#00FFBB', // Lighter green + red: '#FF0000', // Error red (keep for errors) + maroon: '#AA0000', // Darker error + peach: '#00FF99', // Another green variation + yellow: '#FFFF00', // Warning yellow (keep for warnings) + green: '#00FF00', // Main green + teal: '#00FFCC', // Cyan-ish green + }, + }, + amber: { + name: 'amber', + label: 'Amber Terminal', + colors: { + base: '#0D0904', // Deep black with amber tint + mantle: '#160E06', // Slightly lighter black + crust: '#1B1109', // Terminal border color + text: '#FFB000', // Classic amber + subtext0: '#CC8800', // Dimmer amber + subtext1: '#995500', // Even dimmer amber + surface0: '#1C1409', // Slightly lifted surface + surface1: '#211909', // Terminal input area + surface2: '#281E0A', // Selected area + overlay0: '#663300', // Darker amber for overlays + overlay1: '#442200', // Even darker amber + blue: '#FFB000', // Keep everything in amber shades + lavender: '#FFAA00', // Slight variation + sapphire: '#FF9500', // Another variation + sky: '#FFB000', // Main amber + red: '#FF3300', // Error red (keep for errors) + maroon: '#CC3300', // Darker error + peach: '#FFAA55', // Lighter amber + yellow: '#FFDD00', // Warning yellow + green: '#FFB000', // Main amber + teal: '#FFC000', // Lighter amber + }, + }, + ibmPC: { + name: 'ibmPC', + label: 'IBM PC', + colors: { + base: '#000000', // Classic black background + mantle: '#0A0A0A', // Slightly lighter black + crust: '#141414', // Border color + text: '#AAAAAA', // Light gray text + subtext0: '#888888', // Dimmer text + subtext1: '#666666', // Even dimmer text + surface0: '#1C1C1C', // Slightly lifted surface + surface1: '#212121', // Input area + surface2: '#282828', // Selected area + overlay0: '#444444', // Overlay + overlay1: '#333333', // Darker overlay + blue: '#5555FF', // CGA blue + lavender: '#FF55FF', // CGA magenta + sapphire: '#5555FF', // Another blue + sky: '#55FFFF', // CGA cyan + red: '#FF5555', // CGA red + maroon: '#AA0000', // Darker red + peach: '#FF5555', // Another red shade + yellow: '#FFFF55', // CGA yellow + green: '#55FF55', // CGA green + teal: '#55FFFF', // Another cyan + }, + }, };