Website Redesign 7

2025-11-28 02:40:12 +00:00
parent 9b9a201c3e
commit 96e2d0650c
72 changed files with 7504 additions and 1231 deletions
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -0,0 +1,135 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+export type ColorTheme = 'arch' | 'catppuccin';
+export type Mode = 'dark' | 'light';
+
+export interface ThemeColors {
+	primary: string;
+	secondary: string;
+	accent: string;
+	background: string;
+	backgroundLight: string;
+	text: string;
+	textMuted: string;
+	border: string;
+	terminal: string;
+	terminalPrompt: string;
+	terminalUser: string;
+	terminalPath: string;
+}
+
+const themeColorsMap: Record<ColorTheme, { dark: ThemeColors; light: ThemeColors }> = {
+	arch: {
+		dark: {
+			primary: '#1793d1',
+			secondary: '#333333',
+			accent: '#00ff00',
+			background: '#0d1117',
+			backgroundLight: '#161b22',
+			text: '#c9d1d9',
+			textMuted: '#8b949e',
+			border: '#30363d',
+			terminal: '#0d1117',
+			terminalPrompt: '#1793d1',
+			terminalUser: '#00ff00',
+			terminalPath: '#1793d1'
+		},
+		light: {
+			primary: '#1793d1',
+			secondary: '#e0e0e0',
+			accent: '#006600',
+			background: '#f6f8fa',
+			backgroundLight: '#ffffff',
+			text: '#1a1a1a',
+			textMuted: '#4a5568',
+			border: '#d0d7de',
+			terminal: '#ffffff',
+			terminalPrompt: '#0f6ca0',
+			terminalUser: '#006600',
+			terminalPath: '#0f6ca0'
+		}
+	},
+	catppuccin: {
+		// Catppuccin Mocha (dark)
+		dark: {
+			primary: '#89b4fa',      // Blue
+			secondary: '#313244',    // Surface 0
+			accent: '#a6e3a1',       // Green
+			background: '#1e1e2e',   // Base
+			backgroundLight: '#313244', // Surface 0
+			text: '#cdd6f4',         // Text
+			textMuted: '#a6adc8',    // Subtext 0
+			border: '#45475a',       // Surface 1
+			terminal: '#1e1e2e',     // Base
+			terminalPrompt: '#cba6f7', // Mauve
+			terminalUser: '#a6e3a1',   // Green
+			terminalPath: '#89b4fa'    // Blue
+		},
+		// Catppuccin Latte (light)
+		light: {
+			primary: '#1e66f5',      // Blue
+			secondary: '#ccd0da',    // Surface 0
+			accent: '#40a02b',       // Green
+			background: '#eff1f5',   // Base
+			backgroundLight: '#dce0e8', // Crust
+			text: '#4c4f69',         // Text
+			textMuted: '#6c6f85',    // Subtext 0
+			border: '#bcc0cc',       // Surface 1
+			terminal: '#eff1f5',     // Base
+			terminalPrompt: '#8839ef', // Mauve
+			terminalUser: '#40a02b',   // Green
+			terminalPath: '#1e66f5'    // Blue
+		}
+	}
+};
+
+function getInitialMode(): Mode {
+	if (browser) {
+		const stored = localStorage.getItem('mode');
+		if (stored === 'dark' || stored === 'light') return stored;
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	return 'dark';
+}
+
+function getInitialTheme(): ColorTheme {
+	if (browser) {
+		const stored = localStorage.getItem('colorTheme');
+		if (stored && stored in themeColorsMap) return stored as ColorTheme;
+	}
+	return 'arch';
+}
+
+export const mode = writable<Mode>(getInitialMode());
+export const colorTheme = writable<ColorTheme>(getInitialTheme());
+
+export const themeColors = derived([mode, colorTheme], ([$mode, $colorTheme]) => {
+	return themeColorsMap[$colorTheme][$mode];
+});
+
+// Subscribe to persist changes
+if (browser) {
+	mode.subscribe((value) => {
+		localStorage.setItem('mode', value);
+		document.documentElement.setAttribute('data-mode', value);
+	});
+
+	colorTheme.subscribe((value) => {
+		localStorage.setItem('colorTheme', value);
+		document.documentElement.setAttribute('data-theme', value);
+	});
+}
+
+export function toggleMode() {
+	mode.update((m) => (m === 'dark' ? 'light' : 'dark'));
+}
+
+export function setColorTheme(theme: ColorTheme) {
+	colorTheme.set(theme);
+}
+
+export const themeOptions: { value: ColorTheme; label: string; icon: string }[] = [
+	{ value: 'arch', label: 'Arch Linux', icon: '🐧' },
+	{ value: 'catppuccin', label: 'Catppuccin', icon: '🐱' }
+];