Open
Description
Description
Currently, Nuxt UI v3 defines theme colors within a <style> tag using the following structure:
@layer base {
:root {
--ui-color-primary-50: var(--color-blue-50);
--ui-color-primary-100: var(--color-blue-100);
--ui-color-primary-200: var(--color-blue-200);
--ui-color-primary-300: var(--color-blue-300);
--ui-color-primary-400: var(--color-blue-400);
--ui-color-primary-500: var(--color-blue-500);
--ui-color-primary-600: var(--color-blue-600);
--ui-color-primary-700: var(--color-blue-700);
--ui-color-primary-800: var(--color-blue-800);
--ui-color-primary-900: var(--color-blue-900);
--ui-color-primary-950: var(--color-blue-950);
/* other colors... */
}
:root, .light {
--ui-primary: var(--ui-color-primary-500);
/* other colors... */
}
.dark {
--ui-primary: var(--ui-color-primary-400);
/* other colors... */
}
}However, dynamically overriding these CSS variables programmatically (e.g., user-selected colors, colors fetched via API calls, or runtime adjustments) is currently complex and involves manual DOM manipulation.
Proposed Solution:
Introduce a simple JavaScript composable or utility (useUiColors() or setUiColor(variable, value)) that allows easy runtime modification of these CSS variables.
Use-cases:
- Switching themes or branding colors dynamically.
- Allowing users to set custom colors using a color picker.
- Dynamically adjusting colors (primary, secondary, info, etc.) based on data from API responses.
Example Usage:
const { setUiColor } = useUiColors();
// Set primary color using a predefined variable
setUiColor('primary', 'green');
// Set a custom color dynamically from user input or API
setUiColor('secondary', {
'50': '#f1f1ff',
'100': '#e6e7ff',
'200': '#d1d3ff',
'300': '#abadff',
'400': '#807cff',
'500': '#5647ff',
'600': '#4022ff',
'700': '#3110f1',
'800': '#280dca',
'900': '#240da5',
'950': '#110570',
});Benefits:
- Simplifies dynamic theme customizations.
- Eliminates the need for manual DOM or CSS manipulation.
- Enhances user experience by allowing quick, seamless color changes.
Additional context
This approach addresses the common need for dynamic customization in Nuxt UI applications, significantly improving usability and maintainability.