@trimble-oss/moduswebcomponents/collection/providers/theme/theme.store.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { createStore } from "@stencil/store";
// eslint-disable-next-line @typescript-eslint/unbound-method
const { state, onChange, reset, dispose } = createStore({
    mode: 'light',
    theme: 'modus-modern',
});
export const themeStore = {
    state,
    onChange,
    setTheme: (theme) => (state.theme = theme),
    setMode: (mode) => (state.mode = mode),
    reset,
    dispose,
};
// Initialize theme store with system preferences and stored values
export const initializeThemeStore = (initialConfig) => {
    // Set default theme
    state.theme = (initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.theme) || 'modus-modern';
    // Get mode from storage or system preferences
    const stored = localStorage.getItem('modus-theme-config');
    if (stored) {
        const config = JSON.parse(stored);
        state.mode = config.mode;
    }
    else {
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        state.mode = prefersDark ? 'dark' : 'light';
    }
};
// Watch for system theme changes
export const watchSystemTheme = () => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e) => {
        if (!localStorage.getItem('preferred-mode')) {
            state.mode = e.matches ? 'dark' : 'light';
        }
    };
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
};