The themes store manages the visual theme and styling of the application, including colors, backgrounds, header images, and particles.
State Properties
The current theme styling configuration. This is a readonly ref that can only be modified through the setStyling action.
A map of resolved asset URLs for theme resources.
Computed Properties
The complete theme object including metadata, visibility, and styling.type Theme = {
metadata: ThemeMetadata;
visibility: "show" | "draft" | "hide";
styling: ThemeStyling;
}
Actions
initializeTheme
function initializeTheme(): void
import useThemesStore from '@/stores/themes'
const themesStore = useThemesStore()
themesStore.initializeTheme()
setColor
function setColor(color: string): void
setStyling instead.
setStyling
function setStyling(value: ThemeStyling | Theme): void
ThemeStyling object or a full Theme object (extracts the styling property). Persists to localStorage.
Parameters:
value
ThemeStyling | Theme
required
The theme styling configuration or full theme object to apply
themesStore.setStyling({
base: 'dark',
background: '#1a1a1a',
accent: '#4CAF50',
text: {
primary: '#ffffff',
secondary: '#cccccc',
tertiary: '#999999'
},
header: {
background: '#2d2d2d',
scheduleBar: '#4CAF50'
}
})
Type Definitions
type ThemeStyling = {
base?: "light" | "dark";
background?: string;
secondaryBackground?: string;
accent?: string;
text?: ThemeTextColors;
header?: ThemeHeaderConfig;
iconCards?: ThemeIconCards;
particles?: ThemeParticles;
}
type ThemeTextColors = {
primary: string;
secondary: string;
tertiary: string;
}
type ThemeHeaderConfig = {
background: string;
image?: {
full: string;
mobile?: string;
};
scheduleBar: string;
}
type ThemeIconCards = {
regular: string;
invert: string;
}
type ThemeParticles = {
images: string[];
speed?: number;
count?: number;
size?: number;
opacity?: number;
windPower?: number;
}
type ThemeMetadata = {
name: string;
author: string;
}
type Theme = {
metadata: ThemeMetadata;
visibility: "show" | "draft" | "hide";
recommended?: ThemeRecommended;
seasonalDates?: string;
styling: ThemeStyling;
}