authelia/docs/configuration/theme.md

---
layout: default
title: Theme
parent: Configuration
nav_order: 15
---

# Theme

The theme section configures the theme and style Authelia uses.

## Configuration

```yaml
theme: light
```

## Options

### theme
<div markdown="1">
type: string 
{: .label .label-config .label-purple } 
default: light
{: .label .label-config .label-blue }
required: no
{: .label .label-config .label-green }
</div>

There are currently 3 available themes for Authelia:
* light (default)
* dark
* grey

To enable automatic switching between themes, you can set `theme` to `auto`. The theme will be set to either `dark` or `light` depending on the user's system preference which is determined using media queries. To read more technical details about the media queries used, read the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
[FEATURE] Add theme support (#1584) * [FEATURE] Add theme support This change allows users to select a theme for Authelia on start-up. The default will continue to be the existing theme which is known as `light`. Three new options are now also provided: * `dark` * `grey` * `custom` The `custom` theme allows users to specify a primary and secondary hex color code to be utilised to style the portal. Co-authored-by: BankaiNoJutsu <lbegert@gmail.com> * Add themes to integration tests * Remove custom theme * Fix linting issue in access_control_test.go Co-authored-by: BankaiNoJutsu <lbegert@gmail.com> 2021-01-20 19:07:40 +07:00			`---`
			`layout: default`
			`title: Theme`
			`parent: Configuration`
feat(ntp): check clock sync on startup (#2251) This adds method to validate the system clock is synchronized on startup. Configuration allows adjusting the server address, enabled state, desync limit, and if the error is fatal. Co-authored-by: James Elliott <james-d-elliott@users.noreply.github.com> 2021-09-17 11:44:35 +07:00			`nav_order: 15`
[FEATURE] Add theme support (#1584) * [FEATURE] Add theme support This change allows users to select a theme for Authelia on start-up. The default will continue to be the existing theme which is known as `light`. Three new options are now also provided: * `dark` * `grey` * `custom` The `custom` theme allows users to specify a primary and secondary hex color code to be utilised to style the portal. Co-authored-by: BankaiNoJutsu <lbegert@gmail.com> * Add themes to integration tests * Remove custom theme * Fix linting issue in access_control_test.go Co-authored-by: BankaiNoJutsu <lbegert@gmail.com> 2021-01-20 19:07:40 +07:00			`---`

			`# Theme`

			`The theme section configures the theme and style Authelia uses.`

			`## Configuration`

			```yaml
			`theme: light`
docs: refactor several areas of documentation (#1726) Updated all links to use https://www.authelia.com/docs/. Removed all comment sections from documented configuration on the documentation site and replaced them with their own sections. Made all documentation inside config.template.yml double hashes, and made all commented configuration sections single quoted. Added .yamllint.yaml to express our desired YAML styles. Added a style guide. Refactored many documentation areas to be 120 char widths where possible. It's by no means exhaustive but is a large start. Added a statelessness guide for the pending Kubernetes chart introduction. Added labels to configuration documentation and made many areas uniform. 2021-04-11 18:25:03 +07:00			```
docs: misc fixes to documentation after overhaul (#1906) 2021-04-12 10:21:19 +07:00
			`## Options`

			`### theme`
			`<div markdown="1">`
			`type: string`
			`{: .label .label-config .label-purple }`
			`default: light`
			`{: .label .label-config .label-blue }`
			`required: no`
			`{: .label .label-config .label-green }`
			`</div>`

			`There are currently 3 available themes for Authelia:`
			`* light (default)`
			`* dark`
			`* grey`
feat(web): implement automatic theme switch for light/dark (#2046) * Implement an automatic theme The "auto" theme will automatically switch between "dark" and "light" depending on user preference. This allows for automatic dark mode. * fix(configuration): allow the "auto" theme when validating The new theme "auto" was not allowed to be used in a configuration file. * docs: clarify what critera controls the automatic theme How the "auto" theme functioned was unclear. * docs: typeset themes as code * fix(web): apply useEffector to media query watch * docs: add technical details * fix(configuration): resolve merge conflicts 2021-06-17 13:42:03 +07:00
			To enable automatic switching between themes, you can set `theme` to `auto`. The theme will be set to either `dark` or `light` depending on the user's system preference which is determined using media queries. To read more technical details about the media queries used, read the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).