SirBlob/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme Rendering Fixes and Keybinds Update

Browse Source
This commit is contained in:
Sir Blob
2025-11-28 21:11:45 +00:00
parent e7fa0547b7
commit 22e02eb97b
9 changed files with 206 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/lib/stores/theme.ts
View File

@@ -48,30 +48,27 @@ const themes: Record<ColorTheme, ThemeJson> = {
// Export themes for external access
export { themes };
// CSS variable mappings for theme colors - these update dynamically with mode changes
const themeColorVars: Record<string, string> = {
'primary': 'var(--terminal-primary)',
'secondary': 'var(--terminal-secondary)',
'accent': 'var(--terminal-accent)',
'background': 'var(--terminal-bg)',
'backgroundLight': 'var(--terminal-bg-light)',
'text': 'var(--terminal-text)',
'textMuted': 'var(--terminal-muted)',
'border': 'var(--terminal-border)',
'terminal': 'var(--terminal-bg)',
'terminalPrompt': 'var(--terminal-prompt)',
'terminalUser': 'var(--terminal-user)',
'terminalPath': 'var(--terminal-path)',
};
// Build theme colors from JSON - merges colors into colorMap so formatter can use both
function buildThemeColors(theme: ThemeJson, mode: Mode): ThemeColors {
const modeData = theme[mode];
// Merge colors and colorMap - use CSS variables for theme colors so they update dynamically
// Merge: defaults -> theme palette -> theme colors (so text, primary, etc. are correct hex values)
const mergedColorMap: ThemeColorMap = {
...defaultColorMap, // Fallback defaults
...(modeData.colorMap ?? {}), // Theme's color palette
...themeColorVars // Theme colors as CSS variables - update with mode changes
...defaultColorMap, // Fallback defaults (hex values)
...(modeData.colorMap ?? {}), // Theme's color palette (hex values)
// Also add theme colors so (&text), (&primary), etc. resolve to correct hex for this mode
'text': modeData.colors.text,
'textMuted': modeData.colors.textMuted,
'primary': modeData.colors.primary,
'secondary': modeData.colors.secondary,
'accent': modeData.colors.accent,
'background': modeData.colors.background,
'backgroundLight': modeData.colors.backgroundLight,
'border': modeData.colors.border,
'terminal': modeData.colors.terminal,
'terminalPrompt': modeData.colors.terminalPrompt,
'terminalUser': modeData.colors.terminalUser,
'terminalPath': modeData.colors.terminalPath,
'muted': modeData.colors.textMuted, // alias
};
return {
primary: modeData.colors.primary,