@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,
};
const getStoredMode = () => {
    try {
        const stored = localStorage.getItem('modus-theme-config');
        return stored ? JSON.parse(stored).mode : null;
    }
    catch (error) {
        console.warn('Failed to parse theme config from localStorage:', error);
        return null;
    }
};
const getSystemPreferredMode = () => {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    return prefersDark ? 'dark' : 'light';
};
// Initialize theme store with system preferences and stored values
export const initializeThemeStore = (initialConfig) => {
    var _a, _b, _c;
    // Set theme with default fallback
    state.theme = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.theme) !== null && _a !== void 0 ? _a : 'modus-modern';
    // Mode resolution with priority: explicit config > stored preference > system preference
    state.mode =
        (_c = (_b = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.mode) !== null && _b !== void 0 ? _b : getStoredMode()) !== null && _c !== void 0 ? _c : getSystemPreferredMode();
};
// 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);
};