Themes Store

Manage theme styling and appearance for the application

The themes store manages the visual theme and styling of the application, including colors, backgrounds, header images, and particles.

State Properties

styling · ThemeStyling

The current theme styling configuration. This is a readonly ref that can only be modified through the setStyling action.

resolvedAssets · Map<string, string>

A map of resolved asset URLs for theme resources.

Computed Properties

theme · Theme

The complete theme object including metadata, visibility, and styling.

type Theme = {
  metadata: ThemeMetadata;
  visibility: "show" | "draft" | "hide";
  styling: ThemeStyling;
}

Actions

initializeTheme

function initializeTheme(): void

Initializes the theme from localStorage. Falls back to the default light theme if no saved theme exists or if parsing fails.

Usage:

import useThemesStore from '@/stores/themes'

const themesStore = useThemesStore()
themesStore.initializeTheme()

setColor

function setColor(color: string): void

Deprecated: This method is deprecated and has no effect. Use setStyling instead.

setStyling

function setStyling(value: ThemeStyling | Theme): void

Sets the theme styling. Accepts either a 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

Usage:

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;
}