3.1 KiB
description
| description |
|---|
| Learn how to customize the look and feel of the components. |
This module relies on Nuxt App Config file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
Configuration
Components are based on a primary and a gray color. You can change them in your app.config.ts.
export default defineAppConfig({
ui: {
primary: 'green',
gray: 'cool'
}
})
::callout{icon="i-heroicons-light-bulb"}
Try to change the primary and gray colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
::
As this module uses Tailwind CSS under the hood, you can use any of the Tailwind CSS colors or your own custom colors. By default, the primary color is green and the gray color is cool.
When using custom colors or adding additional colors through the extend key in your tailwind.config.ts, you'll need to make sure to define all the shades from 50 to 950 as most of them are used in the components config defined in ui.config/ directory. You can generate your colors using tools such as https://uicolors.app/ for example.
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
export default <Partial<Config>>{
theme: {
extend: {
colors: {
green: {
50: '#EFFDF5',
100: '#D9FBE8',
200: '#B3F5D1',
300: '#75EDAE',
400: '#00DC82',
500: '#00C16A',
600: '#00A155',
700: '#007F45',
800: '#016538',
900: '#0A5331',
950: '#052e16'
}
}
}
}
}
CSS Variables
To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a gray color, the module automatically renames it to cool to avoid conflicts (coolGray was renamed to gray when Tailwind CSS v3.0 was released).
Likewise, you can't define a primary color in your tailwind.config.ts as it would conflict with the primary color defined by the module.
::callout{icon="i-heroicons-light-bulb"}
We'd advise you to use those colors in your components and pages, e.g. text-primary-500 dark:text-primary-400, bg-gray-100 dark:bg-gray-900, etc. so your app automatically adapts when changing your app.config.ts.
::
The primary color also has a DEFAULT shade that changes based on the theme. It is 500 in light mode and 400 in dark mode. You can use as a shortcut in your components and pages, e.g. text-primary, bg-primary, focus-visible:ring-primary, etc.