> For the complete documentation index, see [llms.txt](https://docs.vueless.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vueless.com/global-customization/general.md).

# 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.

{% code title="vueless.config.{js,ts}" %}

```js
export default {
  primary: "blue",
  neutral: "stone",
};
```

{% endcode %}

Vueless uses Tailwind CSS under the hood, so you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. See [Colors](/global-customization/colors.md) chapter for more details.

***

## Rounding

Use the `rounding` key to simultaneously apply a border radius to all components.

{% code title="vueless.config.{js,ts}" %}

```js
export default {
  rounding: 6, /* px */
};
```

{% endcode %}

See [Rounding](/global-customization/rounding.md) chapter for more details.

***

## Focus Outline

Use the `outline` key to simultaneously apply a focus outline ring to all components.

{% code title="vueless.config.{js,ts}" %}

```js
export default {
  outline: 4, /* px */
};
```

{% endcode %}

See [Focus Outline](#focus-outline) chapter for more details.

***

## Font Size

Use the `fontSize` key to simultaneously apply a font size to all components.

{% code title="vueless.config.{js,ts}" %}

```js
export default {
  fontSize: 16, /* px */
};
```

{% endcode %}

See [Font Size](/global-customization/font-size.md) chapter for more details.

***

## Letter Spacing

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

{% code title="vueless.config.{js,ts}" %}

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

{% endcode %}

See [Letter Spacing](/global-customization/letter-spacing.md) chapter for more details.

## Disabled Opacity

You can set the components disabled state opacity globally for related Vueless components.

{% code title="vueless.config.{js,ts}" %}

```js
export default {
  disabledOpacity: 40, /* percent, % */
};
```

{% endcode %}

See [Disabled Opacity ](/global-customization/disabled-opacity.md)chapter for more details.

***

## Dark mode

Use the `colorMode` key to define dark / light modes for all components.

{% code title="vueless.config.{js,ts}" %}

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

{% endcode %}

See [Dark mode](/global-customization/dark-mode.md) chapter for more details.