Vueless Docs
ComponentsGitHubWebsite
  • Installation
    • Quick start (Vue)
    • Quick start (Nuxt)
    • Class autocompletion
    • Minimal requirements
    • Storybook docs
  • Global customization
    • General
    • Colors
    • Rounding
    • Focus Outline
    • Dark mode
    • Base Classes
    • Custom tailwind classes
  • Component customization
    • General
    • Styling
    • Conditional styling
    • Extends styling from keys
    • Nested components styling
    • Classes smart merging
    • Props defaults
    • Redefining props
    • Defining custom props
    • Internationalization (i18n)
  • Creating own components
    • Vueless file structure
    • Create new component
    • Copy existing component
  • Svg Icons
    • General usage
    • Custom icons
    • Dynamic import
    • Advanced settings
  • Helpers
    • Change settings in runtime
Powered by GitBook
On this page
  1. Global customization

Dark mode

You can set the dark mode globally for all Vueless components.

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

Possible color mode values:

  • dark: Enables dark mode. Adds the class vl-dark to the <html> tag.

  • light: Disables dark mode. Adds the class vl-light to the <html> tag.

  • auto (default): Adapts to the user’s system settings for dark mode. Automatically adds the appropriate class (vl-dark or vl-light) to the <html> tag based on the user’s preference.

Last updated 4 months ago