authelia/docs/configuration/theme.md
Alex Gustafsson 150116a172
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 16:42:03 +10:00

852 B

layout title parent nav_order
default Theme Configuration 13

Theme

The theme section configures the theme and style Authelia uses.

Configuration

theme: light

Options

theme

type: string {: .label .label-config .label-purple } default: light {: .label .label-config .label-blue } required: no {: .label .label-config .label-green }

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.