mirror of
https://github.com/0rangebananaspy/authelia.git
synced 2024-09-14 22:47:21 +07:00
150116a172
* 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
36 lines
852 B
Markdown
36 lines
852 B
Markdown
---
|
|
layout: default
|
|
title: Theme
|
|
parent: Configuration
|
|
nav_order: 13
|
|
---
|
|
|
|
# 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).
|