RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
authelia/docs/configuration/theme.md

36 lines
852 B
Markdown
Raw Normal View History

[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 12:07:40 +00:00
---
layout: default
title: Theme
parent: Configuration
feat(configuration): add error and warn log levels (#2050) This is so levels like warn and error can be used to exclude info or warn messages. Additionally there is a reasonable refactoring of logging moving the log config options to the logging key because there are a significant number of log options now. This also decouples the expvars and pprof handlers from the log level, and they are now configured by server.enable_expvars and server.enable_pprof at any logging level.
2021-06-01 04:09:50 +00:00
nav_order: 13
[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 12:07:40 +00: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 11:25:03 +00:00
```
docs: misc fixes to documentation after overhaul (#1906)
2021-04-12 03:21:19 +00: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 06:42:03 +00: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).