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.

---

Letter Spacing

Use the letterSpacing key to simultaneously apply letter spacing to all components.

vueless.config.{js,ts}

export default {
  letterSpacing: 0.025, /* em */
};

See Letter Spacing 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.