Theme Rendering Fixes and Keybinds Update

src/lib/components/NavbarWaybar.svelte

@@ -201,14 +201,16 @@
 					transition:fly={{ y: -10, duration: 150 }}
 				>
 					<div class="dropdown-header">Theme</div>
-					{#each themeOptions as option}
+					{#each themeOptions as option, i}
 						<button
 							class="theme-option"
 							class:active={$colorTheme === option.value}
 							onclick={() => handleThemeSelect(option.value)}
 						>
 							<Icon icon={getThemeIcon(option.value)} width="16" />
-							<span>{option.label}</span>
+							<span class="theme-label">
+								{option.label} <span class="theme-number">[{i+1}]</span>
+							</span>
 							{#if $colorTheme === option.value}
 								<Icon icon="mdi:check" width="14" class="check" />
 							{/if}
@@ -218,7 +220,7 @@
 					<div class="dropdown-header">Mode</div>
 					<button class="theme-option" onclick={toggleMode}>
 						<Icon icon={$mode === 'dark' ? 'mdi:weather-sunny' : 'mdi:weather-night'} width="16" />
-						<span>{$mode === 'dark' ? 'Light Mode' : 'Dark Mode'} (T)</span>
+						<span>{$mode === 'dark' ? 'Light Mode' : 'Dark Mode'} [T]</span>
 					</button>
 				</div>
 			{/if}
@@ -313,14 +315,15 @@
 		<div class="mobile-theme-section">
 			<div class="mobile-section-header">Theme</div>
 			<div class="mobile-theme-options">
-				{#each themeOptions as option}
+				{#each themeOptions as option, i}
 					<button
 						class="mobile-theme-btn"
 						class:active={$colorTheme === option.value}
 						onclick={() => { handleThemeSelect(option.value); closeMobileMenu(); }}
+						title={`Press T+${i+1} to switch to ${option.label}`}
 					>
 						<Icon icon={getThemeIcon(option.value)} width="18" />
-						<span>{option.label}</span>
+						<span class="theme-label"><span class="theme-number">{i+1}.</span> {option.label}</span>
 					</button>
 				{/each}
 			</div>

src/lib/components/TerminalTUI.svelte

@@ -61,6 +61,31 @@
 	let terminalElement: HTMLDivElement;
 	let bodyElement = $state<HTMLDivElement>();
 
+	// Track colorMap identity to detect theme/mode changes
+	let lastColorMapId = $state('');
+	
+	// When colorMap changes (theme/mode toggle), update displayedLines with new parsed segments
+	$effect(() => {
+		// Create a simple identity string from a few colorMap values
+		const colorMapId = `${colorMap.red}-${colorMap.text}-${colorMap.primary}`;
+		
+		// Only update if colorMap actually changed and animation is complete
+		if (colorMapId !== lastColorMapId && isComplete && displayedLines.length > 0) {
+			// Store current showImage states before updating
+			const showImageStates = displayedLines.map(d => d.showImage);
+			
+			// Update with new parsed content
+			displayedLines = parsedLines.map((parsed, i) => ({
+				parsed,
+				charIndex: parsed.plainText.length,
+				complete: true,
+				showImage: showImageStates[i] ?? (parsed.line.type === 'image')
+			}));
+		}
+		
+		lastColorMapId = colorMapId;
+	});
+
 	// Autoscroll to bottom (respects autoscroll prop)
 	function scrollToBottom() {
 		if (!autoscroll || !bodyElement) return;
@@ -251,12 +276,6 @@
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
-		// Toggle theme with T key
-		if (event.key === 't' || event.key === 'T') {
-			event.preventDefault();
-			toggleMode();
-			return;
-		}
 		if (isTyping && (event.key === 'y' || event.key === 'Y')) {
 			event.preventDefault();
 			skipAnimation();

src/lib/components/tui/utils.ts

@@ -21,7 +21,7 @@ export interface TextSegment {
 // Color maps for each theme
 export type ThemeColorMap = Record<string, string>;
 
-// Default color map (fallback) - includes theme colors for backwards compatibility
+// Default color map (fallback) - hex values as defaults, overwritten by theme colorMap at runtime
 export const defaultColorMap: ThemeColorMap = {
 	// Basic colors
 	'red': '#f38ba8',
@@ -36,7 +36,7 @@ export const defaultColorMap: ThemeColorMap = {
 	'pink': '#f5c2e7',
 	'black': '#1e1e2e',
 	'surface': '#313244',
-	// Catppuccin extended colors
+	// Extended colors
 	'teal': '#94e2d5',
 	'sky': '#89dceb',
 	'sapphire': '#74c7ec',
@@ -47,14 +47,14 @@ export const defaultColorMap: ThemeColorMap = {
 	'flamingo': '#f2cdcd',
 	'rosewater': '#f5e0dc',
 	// Semantic colors
-	'primary': 'var(--terminal-primary)',
-	'accent': 'var(--terminal-accent)',
-	'muted': 'var(--terminal-muted)',
+	'primary': '#cba6f7',
+	'accent': '#a6e3a1',
+	'muted': '#6c7086',
 	'error': '#f38ba8',
 	'success': '#a6e3a1',
 	'warning': '#f9e2af',
 	'info': '#89b4fa',
-	// Theme colors (for using text, textMuted, etc. in formatter)
+	// Theme colors
 	'text': '#cdd6f4',
 	'textMuted': '#a6adc8',
 	'background': '#1e1e2e',