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 folder of your project.

---

Colors

Components are based on a brand color and gray color.

vueless.config.{js,ts}

export default {
  brand: "blue",
  gray: "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

You can set the border-radiuses globally for all Vueless components.

vueless.config.{js,ts}

export default {
  roundingSm: 4, /* px */
  rounding: 6,   /* px */
  roundingLg: 8, /* px */
}

See Rounding chapter for more details.

---

Focus Outline

You can set the focus outline width globally for all Vueless components.

vueless.config.{js,ts}

export default {
  outlineSm: 2, /* px */
  outline: 4, /* px */
  outlineLg: 6, /* px */
}

See Focus Outline chapter for more details.

---

Dark mode

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

vueless.config.{js,ts}

export default {
  colorMode: "dark", /* dark | light | auto */
}

See Dark mode chapter for more details.