General
To customize the look and feel of Vueless and modify the default library configuration, use the vueless.config.{js,ts}
file, which should be placed in the root of your project.
Colors
Components are based on a primary
color and neutral
color.
export default {
primary: "blue",
neutral: "stone",
}
Vueless uses Tailwind CSS under the hood, so you can use any of the Tailwind CSS colors or your own custom colors. See Colors chapter for more details.
Rounding
Use the rounding
key to simultaneously apply a border radius to all components.
export default {
rounding: 6, /* px */
}
See Rounding chapter for more details.
Focus Outline
Use the outline
key to simultaneously apply a focus outline ring to all components.
export default {
outline: 4, /* px */
}
See Focus Outline chapter for more details.
Font Size
Use the fontSize
key to simultaneously apply a font size to all components.
export default {
fontSize: 16, /* px */
}
See Font Size chapter for more details.
Disabled Opacity
You can set the components disabled state opacity globally for related Vueless components.
export default {
disabledOpacity: 40, /* percent, % */
}
See Disabled Opacity chapter for more details.
Dark mode
Use the colorMode
key to define dark / light modes for all components.
export default {
colorMode: "dark", /* dark | light | auto */
}
See Dark mode chapter for more details.
Last updated