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.

vueless.config.{js,ts}
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.

vueless.config.{js,ts}
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.

vueless.config.{js,ts}
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.

vueless.config.{js,ts}
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.

vueless.config.{js,ts}
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.

vueless.config.{js,ts}
export default {
  colorMode: "dark", /* dark | light | auto */
}

See Dark mode chapter for more details.

Last updated