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

Dynamic Theme Update

Browse Source
This commit is contained in:
SirBlob
2025-11-28 19:44:11 +00:00
parent c29ad517c5
commit e7fa0547b7
26 changed files with 116 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NavbarWaybar.svelte
+4 -4
View File
@@ -2,7 +2,7 @@
import { mode, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
import { page } from '$app/stores';
import { fly, fade, slide } from 'svelte/transition';
import { user, navigation, colorPalette } from '$lib/config';
import { user, navigation } from '$lib/config';
import Icon from '@iconify/svelte';
import { onMount, onDestroy } from 'svelte';
import '$lib/assets/css/navbar-waybar.css';
@@ -100,9 +100,9 @@
--bar-primary: {$themeColors.primary};
--bar-accent: {$themeColors.accent};
--bar-muted: {$themeColors.textMuted};
--bar-success: {colorPalette.success};
--bar-warning: {colorPalette.warning};
--bar-error: {colorPalette.error};
--bar-success: {$themeColors.colorMap.success};
--bar-warning: {$themeColors.colorMap.warning};
--bar-error: {$themeColors.colorMap.error};
"
>
<!-- Left modules -->
src/lib/components/Terminal.svelte
+2
View File
@@ -117,7 +117,9 @@
--terminal-user: {$themeColors.terminalUser};
--terminal-path: {$themeColors.terminalPath};
--terminal-primary: {$themeColors.primary};
--terminal-secondary: {$themeColors.secondary};
--terminal-accent: {$themeColors.accent};
--terminal-bg-light: {$themeColors.backgroundLight};
"
bind:this={terminalElement}
>
src/lib/components/TerminalPage.svelte
+1
View File
@@ -152,6 +152,7 @@
--terminal-user: {$themeColors.terminalUser};
--terminal-path: {$themeColors.terminalPath};
--terminal-primary: {$themeColors.primary};
--terminal-secondary: {$themeColors.secondary};
--terminal-accent: {$themeColors.accent};
--terminal-bg-light: {$themeColors.backgroundLight};
"
src/lib/components/TerminalTUI.svelte
+5 -1
View File
@@ -38,10 +38,13 @@
typeof speed === 'number' ? speed : (speedPresets[speed] ?? 1)
);
// Get colorMap from current theme
const colorMap = $derived($themeColors.colorMap);
// Pre-parse all lines upfront (segments + plain text)
const parsedLines = $derived<ParsedLine[]>(
lines.map(line => {
const segments = parseColorText(line.content);
const segments = parseColorText(line.content, colorMap);
return {
line,
segments,
@@ -337,6 +340,7 @@
--terminal-user: {$themeColors.terminalUser};
--terminal-path: {$themeColors.terminalPath};
--terminal-primary: {$themeColors.primary};
--terminal-secondary: {$themeColors.secondary};
--terminal-accent: {$themeColors.accent};
--terminal-bg-light: {$themeColors.backgroundLight};
"
src/lib/components/tui/TuiAccordion.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-accordion.css';
@@ -22,7 +23,7 @@
<div class="tui-accordion" style="--accordion-accent: {getButtonStyle(line.style)}">
{#each items as item, i}
{@const contentSegments = parseColorText(item.content)}
{@const contentSegments = parseColorText(item.content, $themeColors.colorMap)}
<div class="accordion-item" class:open={openItems.has(i)}>
<button class="accordion-header" on:click={() => toggleItem(i)}>
<Icon
src/lib/components/tui/TuiButton.svelte
+3 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-button.css';
@@ -14,8 +15,8 @@
// Determine if this is an external link
$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
// Parse color formatting in content
$: segments = parseColorText(line.content);
// Parse color formatting in content using theme colorMap
$: segments = parseColorText(line.content, $themeColors.colorMap);
</script>
<button
src/lib/components/tui/TuiCheckbox.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-checkbox.css';
@@ -13,7 +14,7 @@
change: boolean;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: isDisabled = line.inputDisabled || false;
$: indeterminate = line.checkboxIndeterminate || false;
src/lib/components/tui/TuiInput.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-input.css';
@@ -16,7 +17,7 @@
blur: void;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: placeholder = line.inputPlaceholder || '';
$: inputType = line.inputType || 'text';
$: isDisabled = line.inputDisabled || false;
src/lib/components/tui/TuiLink.svelte
+3 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-link.css';
@@ -10,8 +11,8 @@
// Determine if this is an external link
$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
// Parse color formatting in content
$: segments = parseColorText(line.content);
// Parse color formatting in content using theme colorMap
$: segments = parseColorText(line.content, $themeColors.colorMap);
</script>
<span class="tui-link" style="--link-color: {getButtonStyle(line.style)}">
src/lib/components/tui/TuiProgress.svelte
+3 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-progress.css';
@@ -9,8 +10,8 @@
$: progress = Math.min(100, Math.max(0, line.progress ?? 0));
$: label = line.progressLabel || `${progress}%`;
$: contentSegments = parseColorText(line.content);
$: labelSegments = parseColorText(label);
$: contentSegments = parseColorText(line.content, $themeColors.colorMap);
$: labelSegments = parseColorText(label, $themeColors.colorMap);
</script>
<div class="tui-progress" class:inline={inline} style="--progress-color: {getButtonStyle(line.style)}">
src/lib/components/tui/TuiRadio.svelte
+3 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine, FormOption } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-radio.css';
@@ -13,7 +14,7 @@
change: string;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: options = line.radioOptions || [];
$: isDisabled = line.inputDisabled || false;
$: isHorizontal = line.radioHorizontal || false;
@@ -63,7 +64,7 @@
<div class="radio-options" class:horizontal={isHorizontal}>
{#each options as option}
{@const isSelected = value === option.value}
{@const optionSegments = parseColorText(option.label)}
{@const optionSegments = parseColorText(option.label, $themeColors.colorMap)}
<div
class="radio-option"
class:selected={isSelected}
src/lib/components/tui/TuiSelect.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine, FormOption } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-select.css';
@@ -15,7 +16,7 @@
blur: void;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: options = line.selectOptions || [];
$: placeholder = line.inputPlaceholder || 'Select an option...';
$: isDisabled = line.inputDisabled || false;
src/lib/components/tui/TuiTable.svelte
+2 -1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import '$lib/assets/css/tui-table.css';
@@ -27,7 +28,7 @@
{#each rows as row, i}
<tr class:alt={i % 2 === 1}>
{#each row as cell}
{@const cellSegments = parseColorText(cell)}
{@const cellSegments = parseColorText(cell, $themeColors.colorMap)}
<td>
{#each cellSegments as segment}
{#if getSegmentStyle(segment)}
src/lib/components/tui/TuiTextarea.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-textarea.css';
@@ -16,7 +17,7 @@
blur: void;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: placeholder = line.inputPlaceholder || '';
$: isDisabled = line.inputDisabled || false;
$: hasError = line.inputError;
src/lib/components/tui/TuiToggle.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
import { themeColors } from '$lib/stores/theme';
import type { TerminalLine } from './types';
import { createEventDispatcher } from 'svelte';
import '$lib/assets/css/tui-toggle.css';
@@ -13,7 +14,7 @@
change: boolean;
}>();
$: labelSegments = line.content ? parseColorText(line.content) : [];
$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
$: isDisabled = line.inputDisabled || false;
$: onLabel = line.toggleOnLabel || 'ON';
$: offLabel = line.toggleOffLabel || 'OFF';
src/lib/components/tui/utils.ts
+23 -1
View File
@@ -21,8 +21,9 @@ export interface TextSegment {
// Color maps for each theme
export type ThemeColorMap = Record<string, string>;
// Default color map (fallback)
// Default color map (fallback) - includes theme colors for backwards compatibility
export const defaultColorMap: ThemeColorMap = {
// Basic colors
'red': '#f38ba8',
'green': '#a6e3a1',
'yellow': '#f9e2af',
@@ -35,6 +36,17 @@ export const defaultColorMap: ThemeColorMap = {
'pink': '#f5c2e7',
'black': '#1e1e2e',
'surface': '#313244',
// Catppuccin extended colors
'teal': '#94e2d5',
'sky': '#89dceb',
'sapphire': '#74c7ec',
'lavender': '#b4befe',
'peach': '#fab387',
'maroon': '#eba0ac',
'mauve': '#cba6f7',
'flamingo': '#f2cdcd',
'rosewater': '#f5e0dc',
// Semantic colors
'primary': 'var(--terminal-primary)',
'accent': 'var(--terminal-accent)',
'muted': 'var(--terminal-muted)',
@@ -42,6 +54,16 @@ export const defaultColorMap: ThemeColorMap = {
'success': '#a6e3a1',
'warning': '#f9e2af',
'info': '#89b4fa',
// Theme colors (for using text, textMuted, etc. in formatter)
'text': '#cdd6f4',
'textMuted': '#a6adc8',
'background': '#1e1e2e',
'backgroundLight': '#313244',
'border': '#45475a',
'terminal': '#1e1e2e',
'terminalPrompt': '#cba6f7',
'terminalUser': '#a6e3a1',
'terminalPath': '#89b4fa',
};
// Legacy alias for backwards compatibility