Getting Started
Theme
Learn how to customize the global appearance of NuxtWind components.
If you want to customize the color theme of all your NuxtWind components all at once, you can adjust the default nuxtwind theme in your main.css file.
The
main.css file is required! Luckily nuxtwind takes care of creating and updating it for you. You can configure this behavior via the module options.Configuration
NuxtWind uses the theme-property-keys primary and secondary to determine the colors of the components. To personalize the theme adjust the HEX-color-values in main.css to your liking.
Primary, aswell as secondary, have 11 dfferent shades, ranging from 50 to 950. The higher the number, the darker the color. You should comply with this pattern to ensure the best possible user experience.
main.css
@theme static {
/* Primary Color Scale - Autogenerated by NuxtWind Module */
--color-primary-50: #ecfeff;
--color-primary-100: #cffafe;
--color-primary-200: #a5f3fc;
--color-primary-300: #67e8f9;
--color-primary-400: #22d3ee;
--color-primary-500: #06b6d4;
--color-primary-600: #0891b2;
--color-primary-700: #0e7490;
--color-primary-800: #155e75;
--color-primary-900: #164e63;
--color-primary-950: #083344;
}
@theme static {
/* Secondary Color Scale - Autogenerated by NuxtWind Module */
--color-secondary-50: #ecfdf5;
--color-secondary-100: #d1fae5;
--color-secondary-200: #a7f3d0;
--color-secondary-300: #6ee7b7;
--color-secondary-400: #34d399;
--color-secondary-500: #10b981;
--color-secondary-600: #059669;
--color-secondary-700: #047857;
--color-secondary-800: #065f46;
--color-secondary-900: #064e3b;
--color-secondary-950: #022c22;
}