kritzel-stencil 0.1.14 → 0.1.15

package/dist/cjs/{default-line-tool.config-DvzIh9zU.js → default-line-tool.config-DuwiflC4.js}

@@ -14041,11 +14041,739 @@ Depending on the detected platform, this will hold
 */
 const baseKeymap = mac ? macBaseKeymap : pcBaseKeymap;
 
+/**
+ * Helper function to resolve a color value for a specific theme
+ */
+function resolveColor(color, theme) {
+    return color[theme];
+}
+/**
+ * Default color palette shared across all tool configurations.
+ * This ensures consistency in color options throughout the application.
+ * All colors support theme-specific variations.
+ */
+const DEFAULT_COLOR_PALETTE = [
+    { light: '#000000', dark: '#ffffff', label: 'Primary' },
+    { light: '#ff5252', dark: '#ff5252' },
+    { light: '#ffbc00', dark: '#ffbc00' },
+    { light: '#00c853', dark: '#00c853' },
+    { light: '#0000FF', dark: '#0000FF' },
+    { light: '#d500f9', dark: '#d500f9' },
+    { light: '#fafafa', dark: '#212121', label: 'Background' },
+    { light: '#a52714', dark: '#a52714' },
+    { light: '#ee8100', dark: '#ee8100' },
+    { light: '#558b2f', dark: '#558b2f' },
+    { light: '#01579b', dark: '#01579b' },
+    { light: '#8e24aa', dark: '#8e24aa' },
+    { light: '#90a4ae', dark: '#607d8b', label: 'Neutral' },
+    { light: '#ff4081', dark: '#ff4081' },
+    { light: '#ff6e40', dark: '#ff6e40' },
+    { light: '#aeea00', dark: '#aeea00' },
+    { light: '#304ffe', dark: '#304ffe' },
+    { light: '#7c4dff', dark: '#7c4dff' },
+    { light: '#cfd8dc', dark: '#455a64' },
+    { light: '#f8bbd0', dark: '#ec407a' },
+    { light: '#ffccbc', dark: '#ff7043' },
+    { light: '#f0f4c3', dark: '#c0ca33' },
+    { light: '#9fa8da', dark: '#5c6bc0' },
+    { light: '#d1c4e9', dark: '#9575cd' },
+];
+
+/**
+ * Light theme preset - the default theme
+ */
+const lightTheme = {
+    name: 'light',
+    global: {
+        borderColor: '#ebebeb',
+        dividerColor: '#e0e0e0',
+        focusColor: '#007acc',
+        focusRingColor: 'rgba(0, 122, 255, 0.3)',
+        pointerCursor: 'pointer',
+        hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        iconColor: 'currentColor',
+        scrollbarThumbColor: '#ebebeb',
+        textPrimary: '#000000',
+        textSecondary: '#333333',
+    },
+    selection: {
+        borderColor: '#007AFF',
+        handleColor: '#ffffff',
+    },
+    checkerboard: {
+        colorDark: '#cccccc',
+        colorLight: '#ffffff',
+    },
+    backToContent: {
+        activeBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        color: '#000000',
+        hoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+    },
+    colorPalette: {
+        circleBorderColor: '#dddcdc',
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    contextMenu: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: '12px',
+        boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
+        itemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        itemBorderRadius: '12px',
+        itemColor: '#333333',
+        itemDisabledColor: '#aaaaaa',
+        itemFontSize: '14px',
+        itemGap: '8px',
+        itemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        itemPadding: '8px',
+        padding: '4px',
+    },
+    controls: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        controlActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        controlColor: '#000000',
+        controlHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        controlSelectedBackgroundColor: '#007AFF',
+        controlSelectedColor: '#ffffff',
+    },
+    dialog: {
+        backdropColor: 'rgba(0, 0, 0, 0.4)',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.15)',
+        closeButtonActiveBackground: 'hsl(0, 0%, 0%, 8.6%)',
+        closeButtonBackground: 'transparent',
+        closeButtonColor: '#333333',
+        closeButtonHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        closeButtonHoverColor: '#000000',
+        fontFamily: 'inherit',
+        footerBorder: '1px solid #ebebeb',
+        headerBorder: '1px solid #ebebeb',
+        titleColor: '#000000',
+    },
+    dropdown: {
+        accentColor: '#007bff',
+        hoverBackgroundColor: '#f0f0f0',
+        selectedBackgroundColor: '#007bff1a',
+        textColor: '#333333',
+    },
+    editor: {
+        controlsBottom: '16px',
+        controlsTransform: 'translateX(-50%)',
+        controlsTransition: 'opacity 0.2s ease',
+        controlsTransitionDuration: '0.2s',
+        topLeftButtonsLeft: '16px',
+        topLeftButtonsTop: '16px',
+        topRightButtonsRight: '16px',
+        topRightButtonsTop: '16px',
+    },
+    engine: {
+        backgroundColor: '#ffffff',
+    },
+    fontSize: {
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+        textColor: '#333333',
+    },
+    lineEndings: {
+        hoverBackgroundColor: '#ebebeb',
+        labelColor: '#666666',
+        optionBackground: '#ffffff',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    masterDetail: {
+        backButtonColor: '#333333',
+        backgroundColor: '#ffffff',
+        detailBackgroundColor: '#ffffff',
+        detailFocusOutline: '2px solid #007AFF',
+        menuBackgroundColor: '#ffffff',
+        menuBorderRight: '1px solid #ebebeb',
+        menuItemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        menuItemBackgroundColor: 'transparent',
+        menuItemChevronColor: '#aaaaaa',
+        menuItemColor: '#333333',
+        menuItemDisabledColor: '#aaaaaa',
+        menuItemFocusOutline: '2px solid #007AFF',
+        menuItemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        menuItemSelectedBackgroundColor: '#007AFF',
+        menuItemSelectedColor: '#ffffff',
+        menuItemSelectedHoverBackgroundColor: '#007AFF',
+    },
+    menu: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: '12px',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        gap: '4px',
+        itemBorderRadius: '12px',
+        itemButtonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        itemChildOpenBackgroundColor: 'hsl(0, 0%, 0%, 3%)',
+        itemColor: '#333333',
+        itemEditingBackgroundColor: '#f0f0f0',
+        itemFontSize: '14px',
+        itemHeight: '40px',
+        itemInputBorder: '1px solid #ccc',
+        itemInputHeight: '32px',
+        itemInputSelectionColor: 'rgba(255, 255, 255, 0.16)',
+        itemInputSelectionTextColor: '#000000',
+        itemMinHeight: '40px',
+        itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        itemPadding: '8px',
+        itemSelectedBackgroundColor: '#007aff',
+        itemSelectedColor: '#ffffff',
+        padding: '8px',
+        width: '200px',
+    },
+    moreMenu: {
+        buttonActiveBackgroundColor: '#e9e9e9',
+        buttonBackgroundColor: '#ffffff',
+        buttonBorder: '1px solid #ebebeb',
+        buttonBorderRadius: '12px',
+        buttonBoxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        buttonColor: '#000000',
+        buttonHoverBackgroundColor: '#f5f5f5',
+    },
+    numericInput: {
+        borderColor: '#ebebeb',
+        focusBorderColor: '#007AFF',
+        hoverBorderColor: '#ccc',
+        inputBackground: '#ffffff',
+        labelColor: '#666666',
+        spinnerActiveBackground: 'hsl(0, 0%, 0%, 8.6%)',
+        spinnerBackground: 'transparent',
+        spinnerColor: '#333333',
+        spinnerHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        textColor: '#333333',
+    },
+    opacitySlider: {
+        activeColor: '#007AFF',
+        thumbBorderColor: '#007AFF',
+        thumbColor: '#ffffff',
+        trackColor: '#e0e0e0',
+    },
+    portal: {
+        maxHeight: '300px',
+    },
+    settings: {
+        contentHeadingColor: '#000000',
+        contentTextColor: '#333333',
+        descriptionColor: '#666666',
+        labelColor: '#333333',
+    },
+    shapeFill: {
+        hoverBackgroundColor: '#ebebeb',
+        optionBackground: '#ffffff',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    slideToggle: {
+        borderRadius: '11px',
+        height: '22px',
+        thumbColor: '#fff',
+        thumbSize: '18px',
+        trackCheckedColor: '#007AFF',
+        trackColor: '#ccc',
+        transitionDuration: '0.2s',
+        width: '40px',
+    },
+    splitButton: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        color: '#000000',
+        dividerBackgroundColor: '#ebebeb',
+        hoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+    },
+    strokeSize: {
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    submenu: {
+        gap: '4px',
+    },
+    tooltip: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: '16px',
+        boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
+        color: '#000000',
+        padding: '12px',
+    },
+    utilityPanel: {
+        backgroundColor: '#e2e2e2',
+        buttonBorderRadius: '8px',
+        buttonColor: '#333333',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        separatorColor: 'hsl(0, 0%, 0%, 8%)',
+    },
+};
+
+/**
+ * Dark theme preset
+ */
+const darkTheme = {
+    name: 'dark',
+    global: {
+        borderColor: '#3a3a3a',
+        dividerColor: '#3a3a3a',
+        focusColor: '#4da3ff',
+        focusRingColor: 'rgba(0, 122, 255, 0.4)',
+        pointerCursor: 'pointer',
+        hoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        iconColor: 'currentColor',
+        scrollbarThumbColor: '#555555',
+        textPrimary: '#ffffff',
+        textSecondary: '#e0e0e0',
+    },
+    selection: {
+        borderColor: '#0A84FF',
+        handleColor: '#1a1a1a',
+    },
+    checkerboard: {
+        colorDark: '#4a4a4a',
+        colorLight: '#3a3a3a',
+    },
+    backToContent: {
+        activeBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        color: '#ffffff',
+        hoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+    },
+    colorPalette: {
+        circleBorderColor: '#4a4a4a',
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    contextMenu: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        borderRadius: '12px',
+        boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
+        itemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        itemBorderRadius: '12px',
+        itemColor: '#e0e0e0',
+        itemDisabledColor: '#666666',
+        itemFontSize: '14px',
+        itemGap: '8px',
+        itemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        itemPadding: '8px',
+        padding: '4px',
+    },
+    controls: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        controlActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        controlColor: '#ffffff',
+        controlHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        controlSelectedBackgroundColor: '#0A84FF',
+        controlSelectedColor: '#ffffff',
+    },
+    dialog: {
+        backdropColor: 'rgba(0, 0, 0, 0.6)',
+        backgroundColor: '#2a2a2a',
+        bodyPadding: '16px',
+        border: '1px solid #3a3a3a',
+        borderRadius: '16px',
+        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.5)',
+        closeButtonActiveBackground: 'hsl(0, 0%, 100%, 12%)',
+        closeButtonBackground: 'transparent',
+        closeButtonColor: '#e0e0e0',
+        closeButtonHoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        closeButtonHoverColor: '#ffffff',
+        footerBorder: '1px solid #3a3a3a',
+        headerBorder: '1px solid #3a3a3a',
+        titleColor: '#ffffff',
+        titleFontSize: '18px',
+        titleFontWeight: '600',
+    },
+    dropdown: {
+        accentColor: '#0A84FF',
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: 'rgba(10, 132, 255, 0.2)',
+        textColor: '#e0e0e0',
+    },
+    editor: {
+        controlsBottom: '16px',
+        controlsTransform: 'translateX(-50%)',
+        controlsTransition: 'opacity 0.2s ease',
+        controlsTransitionDuration: '0.2s',
+        topLeftButtonsLeft: '16px',
+        topLeftButtonsTop: '16px',
+        topRightButtonsRight: '16px',
+        topRightButtonsTop: '16px',
+    },
+    engine: {
+        backgroundColor: '#1a1a1a',
+    },
+    fontSize: {
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+        textColor: '#e0e0e0',
+    },
+    lineEndings: {
+        hoverBackgroundColor: '#3a3a3a',
+        labelColor: '#999999',
+        optionBackground: '#2a2a2a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    masterDetail: {
+        backButtonColor: '#e0e0e0',
+        backgroundColor: '#2a2a2a',
+        detailBackgroundColor: '#2a2a2a',
+        detailFocusOutline: '2px solid #0A84FF',
+        menuBackgroundColor: '#2a2a2a',
+        menuBorderRight: '1px solid #3a3a3a',
+        menuItemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        menuItemBackgroundColor: 'transparent',
+        menuItemChevronColor: '#666666',
+        menuItemColor: '#e0e0e0',
+        menuItemDisabledColor: '#666666',
+        menuItemFocusOutline: '2px solid #0A84FF',
+        menuItemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        menuItemSelectedBackgroundColor: '#0A84FF',
+        menuItemSelectedColor: '#ffffff',
+        menuItemSelectedHoverBackgroundColor: '#0A84FF',
+    },
+    menu: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        borderRadius: '12px',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        gap: '4px',
+        itemBorderRadius: '12px',
+        itemButtonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        itemChildOpenBackgroundColor: 'hsl(0, 0%, 100%, 6%)',
+        itemColor: '#e0e0e0',
+        itemEditingBackgroundColor: '#3a3a3a',
+        itemFontSize: '14px',
+        itemHeight: '40px',
+        itemInputBorder: '1px solid #4a4a4a',
+        itemInputHeight: '32px',
+        itemInputSelectionColor: 'rgba(255, 255, 255, 0.2)',
+        itemInputSelectionTextColor: '#ffffff',
+        itemMinHeight: '40px',
+        itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 20%)',
+        itemPadding: '8px',
+        itemSelectedBackgroundColor: '#0A84FF',
+        itemSelectedColor: '#ffffff',
+        padding: '8px',
+        width: '200px',
+    },
+    moreMenu: {
+        buttonActiveBackgroundColor: '#444444',
+        buttonBackgroundColor: '#2a2a2a',
+        buttonBorder: '1px solid #3a3a3a',
+        buttonBorderRadius: '12px',
+        buttonBoxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        buttonColor: '#ffffff',
+        buttonHoverBackgroundColor: '#3b3b3b',
+    },
+    numericInput: {
+        borderColor: '#3a3a3a',
+        focusBorderColor: '#0A84FF',
+        hoverBorderColor: '#4a4a4a',
+        inputBackground: '#1a1a1a',
+        labelColor: '#999999',
+        spinnerActiveBackground: 'hsl(0, 0%, 100%, 12%)',
+        spinnerBackground: 'transparent',
+        spinnerColor: '#e0e0e0',
+        spinnerHoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        textColor: '#e0e0e0',
+    },
+    opacitySlider: {
+        activeColor: '#0A84FF',
+        thumbBorderColor: '#0A84FF',
+        thumbColor: '#ffffff',
+        trackColor: '#4a4a4a',
+    },
+    portal: {
+        maxHeight: '300px',
+    },
+    settings: {
+        contentHeadingColor: '#ffffff',
+        contentTextColor: '#e0e0e0',
+        descriptionColor: '#999999',
+        labelColor: '#e0e0e0',
+    },
+    shapeFill: {
+        hoverBackgroundColor: '#3a3a3a',
+        optionBackground: '#2a2a2a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    slideToggle: {
+        borderRadius: '11px',
+        height: '22px',
+        thumbColor: '#ffffff',
+        thumbSize: '18px',
+        trackCheckedColor: '#0A84FF',
+        trackColor: '#4a4a4a',
+        transitionDuration: '0.2s',
+        width: '40px',
+    },
+    splitButton: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        color: '#ffffff',
+        dividerBackgroundColor: '#3a3a3a',
+        hoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+    },
+    strokeSize: {
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    submenu: {
+        gap: '4px',
+    },
+    tooltip: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        borderRadius: '16px',
+        boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
+        color: '#ffffff',
+        padding: '12px',
+    },
+    utilityPanel: {
+        backgroundColor: '#3a3a3a',
+        buttonBorderRadius: '8px',
+        buttonColor: '#e0e0e0',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        separatorColor: 'hsl(0, 0%, 100%, 12%)',
+    },
+};
+
+class ThemeHelper {
+    /**
+     * Converts a camelCase string to kebab-case.
+     * @example ThemeHelper.camelToKebab('controlHoverBackgroundColor') → 'control-hover-background-color'
+     * @example ThemeHelper.camelToKebab('backgroundColor') → 'background-color'
+     * @example ThemeHelper.camelToKebab('gap') → 'gap'
+     */
+    static camelToKebab(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    /**
+     * Recursively flattens a theme object into a map of CSS variable names to values.
+     * Skips the 'name' property at the root level since it's the theme identifier, not a CSS value.
+     *
+     * @param theme - The theme object to flatten
+     * @param prefix - The CSS variable prefix (default: '--kritzel')
+     * @returns A Map of CSS variable names to their values
+     *
+     * @example
+     * ThemeHelper.flattenThemeToVariables(lightTheme)
+     * // Returns Map {
+     * //   '--kritzel-global-pointer-cursor' => 'pointer',
+     * //   '--kritzel-controls-gap' => '8px',
+     * //   ...
+     * // }
+     */
+    static flattenThemeToVariables(theme, prefix = '--kritzel') {
+        const variables = new Map();
+        const recurse = (obj, currentPrefix, isRoot = false) => {
+            for (const [key, value] of Object.entries(obj)) {
+                // Skip the 'name' property at the root level
+                if (isRoot && key === 'name') {
+                    continue;
+                }
+                const kebabKey = ThemeHelper.camelToKebab(key);
+                const variableName = `${currentPrefix}-${kebabKey}`;
+                if (typeof value === 'object' && value !== null) {
+                    recurse(value, variableName);
+                }
+                else if (typeof value === 'string') {
+                    variables.set(variableName, value);
+                }
+            }
+        };
+        recurse(theme, prefix, true);
+        return variables;
+    }
+    /**
+     * Applies a map of CSS variables to an HTML element.
+     *
+     * @param element - The target HTML element
+     * @param variables - A Map of CSS variable names to values
+     */
+    static applyVariablesToElement(element, variables) {
+        for (const [name, value] of variables) {
+            element.style.setProperty(name, value);
+        }
+    }
+    /**
+     * Convenience method that flattens a theme and applies it to an element in one call.
+     *
+     * @param element - The target HTML element
+     * @param theme - The theme object to apply
+     */
+    static applyThemeToElement(element, theme) {
+        const variables = ThemeHelper.flattenThemeToVariables(theme);
+        ThemeHelper.applyVariablesToElement(element, variables);
+    }
+}
+
+const THEME_STORAGE_KEY = 'kritzel-theme';
+const DEFAULT_THEME = 'light';
+/**
+ * Manages theme state and application across the Kritzel editor.
+ * Handles theme persistence, retrieval, and CSS variable application.
+ */
+class KritzelThemeManager {
+    _core;
+    _currentTheme = DEFAULT_THEME;
+    _targetElement = null;
+    constructor(core) {
+        this._core = core;
+        this._currentTheme = KritzelThemeManager.getStoredTheme();
+    }
+    /**
+     * Gets the current active theme name.
+     */
+    get currentTheme() {
+        return this._currentTheme;
+    }
+    /**
+     * Sets the target element where theme CSS variables will be applied.
+     */
+    setTargetElement(element) {
+        this._targetElement = element;
+        if (this._targetElement) {
+            this.applyTheme(this._currentTheme);
+        }
+    }
+    /**
+     * Gets the current target element.
+     */
+    getTargetElement() {
+        return this._targetElement;
+    }
+    /**
+     * Gets the theme object by name.
+     */
+    getThemeByName(themeName) {
+        return themeName === 'dark' ? darkTheme : lightTheme;
+    }
+    /**
+     * Gets the stored theme name from localStorage.
+     * Can be called statically without a manager instance.
+     * @returns The stored theme name, or 'light' as default
+     */
+    static getStoredTheme() {
+        if (typeof localStorage === 'undefined') {
+            return DEFAULT_THEME;
+        }
+        const stored = localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored === 'dark' || stored === 'light') {
+            return stored;
+        }
+        return DEFAULT_THEME;
+    }
+    /**
+     * Saves the theme name to localStorage.
+     */
+    saveTheme(themeName) {
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        localStorage.setItem(THEME_STORAGE_KEY, themeName);
+    }
+    /**
+     * Sets the current theme, saves it to storage, and applies it to the target element.
+     */
+    setTheme(themeName) {
+        this._currentTheme = themeName;
+        this.saveTheme(themeName);
+        if (this._targetElement) {
+            this.applyTheme(themeName);
+        }
+    }
+    /**
+     * Checks if the current theme is dark.
+     */
+    isDarkTheme() {
+        return this._currentTheme === 'dark';
+    }
+    /**
+     * Applies a theme to the target element by setting CSS custom properties.
+     * Uses the generic theme utility to automatically derive CSS variable names
+     * from the theme interface structure.
+     */
+    applyTheme(themeName) {
+        if (!this._targetElement) {
+            return;
+        }
+        const theme = this.getThemeByName(themeName);
+        ThemeHelper.applyThemeToElement(this._targetElement, theme);
+    }
+    /**
+     * Cleans up theme manager state.
+     */
+    cleanup() {
+        this._targetElement = null;
+    }
+}
+
+class KritzelColorHelper {
+    /**
+     * Resolves a color value based on the current theme.
+     * Handles both simple string colors and theme-aware color objects.
+     * @param color - The color to resolve (string or ThemeAwareColor)
+     * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
+     * @returns The resolved hex color string, or empty string if color is undefined
+     */
+    static resolveThemeColor(color, theme) {
+        if (!color) {
+            return '';
+        }
+        const currentTheme = theme ?? KritzelThemeManager.getStoredTheme();
+        return resolveColor(color, currentTheme);
+    }
+    /**
+     * Applies opacity to a theme-aware color and returns an rgba string.
+     * @param color - The theme-aware color object
+     * @param opacity - The opacity value between 0 and 1
+     * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
+     * @returns The color as an rgba string, or the resolved hex if opacity is 1
+     */
+    static applyOpacity(color, opacity, theme) {
+        const hexColor = this.resolveThemeColor(color, theme);
+        if (!hexColor || opacity >= 1)
+            return hexColor;
+        const sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        let r, g, b;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            return hexColor;
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return hexColor;
+        }
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+}
+
 class KritzelText extends KritzelBaseObject {
     __class__ = 'KritzelText';
     fontFamily = 'Arial';
     fontSize = 8;
-    fontColor = '#000000';
+    fontColor = { light: '#000000', dark: '#ffffff' };
     initialWidth = 1;
     initialHeight = 1;
     scale = 1;
@@ -14079,7 +14807,7 @@ class KritzelText extends KritzelBaseObject {
             this.translateY = config.translateY || 0;
             this.fontSize = config.fontSize || 8;
             this.fontFamily = config.fontFamily || 'Arial';
-            this.fontColor = config.fontColor || '#000000';
+            this.fontColor = config.fontColor || { light: '#000000', dark: '#ffffff' };
             this.width = this.initialWidth / (this._core.store.state.scale < 0 ? this._core.store.state.scale : 1);
             this.height = (this.fontSize * 1.2) / (this._core.store.state.scale < 0 ? this._core.store.state.scale : 1);
             this.scale = config.scale || 1;
@@ -14097,7 +14825,7 @@ class KritzelText extends KritzelBaseObject {
         object.translateY = 0;
         object.width = object.initialWidth / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
         object.height = (object.fontSize * 1.2) / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
-        object.backgroundColor = 'transparent';
+        object.backgroundColor = { light: 'transparent', dark: 'transparent' };
         object.initialWidth = object.width;
         object.initialHeight = object.height;
         object.scaleFactor = 1;
@@ -14112,7 +14840,7 @@ class KritzelText extends KritzelBaseObject {
         }
         element.style.fontFamily = this.fontFamily;
         element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = this.fontColor;
+        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             requestAnimationFrame(() => this.adjustSizeOnInput());
             return;
@@ -14318,7 +15046,7 @@ class KritzelPath extends KritzelBaseObject {
     __class__ = 'KritzelPath';
     points;
     d;
-    stroke = 'none';
+    stroke = { light: 'none', dark: 'none' };
     strokeWidth;
     lineSlack = 0.5;
     fill;
@@ -14343,7 +15071,7 @@ class KritzelPath extends KritzelBaseObject {
         this.translateY = config?.translateY ?? 0;
         this.scale = config?.scale ?? 1;
         this.strokeWidth = config?.strokeWidth ?? 8;
-        this.fill = config?.fill ?? '#000000';
+        this.fill = config?.fill ?? { light: '#000000', dark: '#ffffff' };
         this.d = this.generateSvgPath();
         this.updateDimensions();
     }
@@ -14358,7 +15086,7 @@ class KritzelPath extends KritzelBaseObject {
         object.translateY = options?.translateY ?? 0;
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 8;
-        object.fill = options?.fill ?? '#000000';
+        object.fill = options?.fill ?? { light: '#000000', dark: '#ffffff' };
         object.opacity = options?.opacity ?? 1;
         object.zIndex = core.store.currentZIndex;
         object.d = object.generateSvgPath();
@@ -14780,7 +15508,7 @@ class KritzelLine extends KritzelBaseObject {
         this.translateY = config?.translateY ?? 0;
         this.scale = config?.scale ?? 1;
         this.strokeWidth = config?.strokeWidth ?? 4;
-        this.stroke = config?.stroke ?? '#000000';
+        this.stroke = config?.stroke ?? { light: '#000000', dark: '#ffffff' };
         this.startAnchor = config?.startAnchor;
         this.endAnchor = config?.endAnchor;
         this.arrows = config?.arrows;
@@ -14802,7 +15530,7 @@ class KritzelLine extends KritzelBaseObject {
         object.translateY = options?.translateY ?? 0;
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 4;
-        object.stroke = options?.stroke ?? '#000000';
+        object.stroke = options?.stroke ?? { light: '#000000', dark: '#ffffff' };
         object.opacity = options?.opacity ?? 1;
         object.startAnchor = options?.startAnchor;
         object.endAnchor = options?.endAnchor;
@@ -15315,7 +16043,8 @@ class KritzelLine extends KritzelBaseObject {
     /** Get the arrow fill color for start or end, defaulting to stroke color */
     getArrowFill(end) {
         const config = end === 'start' ? this.arrows?.start : this.arrows?.end;
-        return config?.fill ?? this.stroke;
+        const color = config?.fill ?? this.stroke;
+        return KritzelColorHelper.resolveThemeColor(color);
     }
     /**
      * Generate SVG path data for an arrow head based on the given style.
@@ -15842,39 +16571,8 @@ class KritzelBaseTool {
     }
 }
 
-/**
- * Default color palette shared across all tool configurations.
- * This ensures consistency in color options throughout the application.
- */
-const DEFAULT_COLOR_PALETTE = [
-    '#000000',
-    '#ff5252',
-    '#ffbc00',
-    '#00c853',
-    '#0000FF',
-    '#d500f9',
-    '#fafafa',
-    '#a52714',
-    '#ee8100',
-    '#558b2f',
-    '#01579b',
-    '#8e24aa',
-    '#90a4ae',
-    '#ff4081',
-    '#ff6e40',
-    '#aeea00',
-    '#304ffe',
-    '#7c4dff',
-    '#cfd8dc',
-    '#f8bbd0',
-    '#ffccbc',
-    '#f0f4c3',
-    '#9fa8da',
-    '#d1c4e9',
-];
-
 class KritzelBrushTool extends KritzelBaseTool {
-    color = '#000000';
+    color = DEFAULT_COLOR_PALETTE[0];
     size = 6;
     opacity = 1;
     palette = [...DEFAULT_COLOR_PALETTE];
@@ -16363,35 +17061,10 @@ class KritzelSelectionGroup extends KritzelBaseObject {
 }
 
 class KritzelLineTool extends KritzelBaseTool {
-    color = '#000000';
+    color = DEFAULT_COLOR_PALETTE[0];
     size = 4;
     opacity = 1;
-    palette = [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#9fa8da',
-        '#d1c4e9',
-    ];
+    palette = [...DEFAULT_COLOR_PALETTE];
     /** Arrow head configuration for lines created with this tool */
     arrows;
     _startX = 0;
@@ -16745,25 +17418,9 @@ class KritzelImageTool extends KritzelBaseTool {
 class KritzelTextTool extends KritzelBaseTool {
     fontFamily = 'Arial';
     fontSize = 16;
-    fontColor = '#000000';
+    fontColor = DEFAULT_COLOR_PALETTE[0];
     opacity = 1;
-    palette = [
-        '#000000',
-        '#FFFFFF',
-        '#FF0000',
-        '#00FF00',
-        '#0000FF',
-        '#FFFF00',
-        '#FF00FF',
-        '#00FFFF',
-        '#808080',
-        '#C0C0C0',
-        '#800000',
-        '#008000',
-        '#000080',
-        '#808000',
-        '#800080',
-    ];
+    palette = [...DEFAULT_COLOR_PALETTE];
     constructor(core) {
         super(core);
     }
@@ -17541,8 +18198,8 @@ class KritzelSelectionBox extends KritzelBaseObject {
         object.workspaceId = core.store.state.activeWorkspace.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;
-        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
-        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(0, 122, 255, 0.5))';
+        object.backgroundColor = { light: 'rgba(0, 122, 255, 0.2)', dark: 'rgba(0, 122, 255, 0.2)' };
+        object.borderColor = { light: 'rgba(0, 122, 255, 0.5)', dark: 'rgba(0, 122, 255, 0.5)' };
         object.borderWidth = 2;
         object.height = 0;
         object.width = 0;
@@ -17970,7 +18627,7 @@ class KritzelLineHandleHandler extends KritzelBaseHandler {
                     t,
                     edgeX,
                     edgeY,
-                    lineStroke: line.stroke,
+                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
                     lineStrokeWidth: line.strokeWidth / line.scale,
                     arrowOffset: line.hasStartArrow ? line.getArrowSize('start') / line.scale : undefined,
                     arrowStyle: line.hasStartArrow ? line.arrows?.start?.style : undefined,
@@ -18032,7 +18689,7 @@ class KritzelLineHandleHandler extends KritzelBaseHandler {
                     t,
                     edgeX,
                     edgeY,
-                    lineStroke: line.stroke,
+                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
                     lineStrokeWidth: line.strokeWidth / line.scale,
                     arrowOffset: line.hasEndArrow ? line.getArrowSize('end') / line.scale : undefined,
                     arrowStyle: line.hasEndArrow ? line.arrows?.end?.style : undefined,
@@ -18215,12 +18872,12 @@ exports.ShapeType = void 0;
 class KritzelShape extends KritzelBaseObject {
     __class__ = 'KritzelShape';
     shapeType = exports.ShapeType.Rectangle;
-    fillColor = 'transparent';
-    strokeColor = '#000000';
+    fillColor = { light: 'transparent', dark: 'transparent' };
+    strokeColor = { light: '#000000', dark: '#ffffff' };
     strokeWidth = 4;
     fontFamily = 'Arial';
     fontSize = 16;
-    fontColor = '#000000';
+    fontColor = { light: '#000000', dark: '#ffffff' };
     /** Screen-space x coordinate of the shape's top-left corner (like Path.x) */
     x = 0;
     /** Screen-space y coordinate of the shape's top-left corner (like Path.y) */
@@ -18254,12 +18911,12 @@ class KritzelShape extends KritzelBaseObject {
             this.width = config.width ?? 100;
             this.height = config.height ?? 100;
             this.shapeType = config.shapeType ?? exports.ShapeType.Rectangle;
-            this.fillColor = config.fillColor ?? 'transparent';
-            this.strokeColor = config.strokeColor ?? '#000000';
+            this.fillColor = config.fillColor ?? { light: 'transparent', dark: 'transparent' };
+            this.strokeColor = config.strokeColor ?? { light: '#000000', dark: '#ffffff' };
             this.strokeWidth = config.strokeWidth ?? 4;
             this.fontSize = config.fontSize ?? 16;
             this.fontFamily = config.fontFamily ?? 'Arial';
-            this.fontColor = config.fontColor ?? '#000000';
+            this.fontColor = config.fontColor ?? { light: '#000000', dark: '#ffffff' };
             this.scale = config.scale ?? 1;
             this.scaleFactor = config.scaleX ?? 1;
         }
@@ -18284,14 +18941,14 @@ class KritzelShape extends KritzelBaseObject {
         object.width = config?.width ?? 100;
         object.height = config?.height ?? 100;
         object.shapeType = config?.shapeType ?? exports.ShapeType.Rectangle;
-        object.fillColor = config?.fillColor ?? 'transparent';
-        object.strokeColor = config?.strokeColor ?? '#000000';
+        object.fillColor = config?.fillColor ?? { light: 'transparent', dark: 'transparent' };
+        object.strokeColor = config?.strokeColor ?? { light: '#000000', dark: '#ffffff' };
         object.strokeWidth = config?.strokeWidth ?? 4;
         object.opacity = config?.opacity ?? 1;
         object.fontSize = config?.fontSize ?? 16;
         object.fontFamily = config?.fontFamily ?? 'Arial';
-        object.fontColor = config?.fontColor ?? '#000000';
-        object.backgroundColor = 'transparent';
+        object.fontColor = config?.fontColor ?? { light: '#000000', dark: '#ffffff' };
+        object.backgroundColor = { light: 'transparent', dark: 'transparent' };
         object.scaleFactor = 1;
         object.scale = config?.scale ?? core.store.state.scale;
         object.zIndex = core.store.currentZIndex;
@@ -18333,7 +18990,7 @@ class KritzelShape extends KritzelBaseObject {
         }
         element.style.fontFamily = this.fontFamily;
         element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = this.fontColor;
+        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
         element.style.whiteSpace = 'pre-wrap';
         element.style.wordWrap = 'break-word';
         element.innerHTML = '';
@@ -18603,7 +19260,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
     get color() {
         const objects = this.flattenObjects(this.getSelectedObjects());
         if (objects.length === 0)
-            return '#000000';
+            return DEFAULT_COLOR_PALETTE[0];
         for (const obj of objects) {
             if (obj instanceof KritzelPath)
                 return obj.fill;
@@ -18614,7 +19271,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             if (obj instanceof KritzelShape)
                 return obj.strokeColor;
         }
-        return '#000000';
+        return DEFAULT_COLOR_PALETTE[0];
     }
     set color(value) {
         const objects = this.flattenObjects(this.getSelectedObjects());
@@ -18678,7 +19335,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             if (obj instanceof KritzelShape)
                 return obj.fillColor;
         }
-        return 'transparent';
+        return { light: 'transparent', dark: 'transparent' };
     }
     set fillColor(value) {
         const objects = this.flattenObjects(this.getSelectedObjects());
@@ -18686,7 +19343,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
             if (obj instanceof KritzelShape) {
                 this._core.updateObject(obj, { fillColor: value });
                 // When switching to fill mode, also update stroke color to match
-                if (value !== 'transparent') {
+                const isTransparent = typeof value === 'string' ? value === 'transparent' :
+                    (value.light === 'transparent' && value.dark === 'transparent');
+                if (!isTransparent) {
                     this._core.updateObject(obj, { strokeColor: value });
                 }
             }
@@ -36372,7 +37031,7 @@ class KritzelAnchorManager {
 
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
-    color: '#000000',
+    color: DEFAULT_COLOR_PALETTE[0],
     size: 16,
     palettes: {
         pen: [...DEFAULT_COLOR_PALETTE],
@@ -36380,14 +37039,14 @@ const DEFAULT_BRUSH_CONFIG = {
 };
 
 const DEFAULT_TEXT_CONFIG = {
-    color: '#000000',
+    color: DEFAULT_COLOR_PALETTE[0],
     size: 8,
     fontFamily: 'Arial',
     palette: [...DEFAULT_COLOR_PALETTE],
 };
 
 const DEFAULT_LINE_TOOL_CONFIG = {
-    color: '#000000',
+    color: DEFAULT_COLOR_PALETTE[0],
     size: 4,
     palette: [...DEFAULT_COLOR_PALETTE],
     arrows: {
@@ -36411,6 +37070,7 @@ exports.KritzelBaseObject = KritzelBaseObject;
 exports.KritzelBaseTool = KritzelBaseTool;
 exports.KritzelBrushTool = KritzelBrushTool;
 exports.KritzelClassHelper = KritzelClassHelper;
+exports.KritzelColorHelper = KritzelColorHelper;
 exports.KritzelCursorHelper = KritzelCursorHelper;
 exports.KritzelDevicesHelper = KritzelDevicesHelper;
 exports.KritzelEraserTool = KritzelEraserTool;
@@ -36429,6 +37089,7 @@ exports.KritzelSelectionTool = KritzelSelectionTool;
 exports.KritzelShape = KritzelShape;
 exports.KritzelText = KritzelText;
 exports.KritzelTextTool = KritzelTextTool;
+exports.KritzelThemeManager = KritzelThemeManager;
 exports.KritzelToolRegistry = KritzelToolRegistry;
 exports.KritzelWorkspace = KritzelWorkspace;
 exports.ObjectHelper = ObjectHelper;
@@ -36440,6 +37101,7 @@ exports.create = create$8;
 exports.createDecoder = createDecoder$1;
 exports.createEncoder = createEncoder$1;
 exports.createUint8ArrayFromArrayBuffer = createUint8ArrayFromArrayBuffer;
+exports.darkTheme = darkTheme;
 exports.encodeStateAsUpdate = encodeStateAsUpdate;
 exports.encodeStateVector = encodeStateVector;
 exports.equalityDeep = equalityDeep$1;
@@ -36448,6 +37110,7 @@ exports.fromBase64 = fromBase64;
 exports.getUnixTime = getUnixTime$1;
 exports.isNode = isNode;
 exports.length = length$2;
+exports.lightTheme = lightTheme;
 exports.map = map;
 exports.min = min$2;
 exports.offChange = offChange;