1.lightTheme{
2    --text: __text__;
3    --background: __background__;
4    --text_alt: __text_alt__;
5    --background_alt: __background_alt__;
6    --text_neu: __text_neu__;
7    --background_neu: __background_neu__;
8    --border: __border__;
9    --highlight: __highlight__;
10    --existing: __existing__;
11    --missing: __missing__;
12    --link: __link__;
13    --background_site: __background_site__;
14    --search-png: url(images/search.png);
15    --toc-arrows: url(images/toc-arrows.png);
16    --pre_text: __pre_text_color__;
17    --pre_background: __pre_background_color__;
18    --opacity: 1;
19    --transition: none;
20    --selection_color: __selection_color__ ;
21    --selection_background: __selection_background_color__;
22    --scrollbar_track: __scrollbar_color_track__;
23    --scrollbar_thumb: __scrollbar_color_thumb__;
24}
25
26.darkTheme{
27    --text: __text_color_dark__;
28    --background: __background_color_dark__;
29    --text_alt: __text_alt_color_dark__;
30    --background_alt: __background_alt_color_dark__;
31    --text_neu: __text_neu_color_dark__;
32    --background_neu: __background_neu_color_dark__;
33    --border: __border_color_dark__;
34    --highlight: __highlight_color_dark__;
35    --existing: __existing_color_dark__;
36    --missing: __missing_color_dark__;
37    --link: __link_color_dark__;
38    --background_site: __background_site_color_dark__;
39    --search-png: url(images/search-dark.png);
40    --toc-arrows: url(images/toc-arrows-dark.png);
41    --pre_text: __pre_text_color_dark__;
42    --pre_background: __pre_background_color_dark__;
43    --opacity: 0.8;
44    --transition: opacity ease-in-out 0.25s;
45    --selection_color: __selection_color_dark__ ;
46    --selection_background: __selection_background_color_dark__;
47    --scrollbar_track: __scrollbar_track_color_dark__;
48    --scrollbar_thumb: __scrollbar_thumb_color_dark__;
49}
50
51
52/* User prefers light theme and automatic is switched on*/
53@media (prefers-color-scheme: light){
54    :root[theme="auto"]{
55        .lightTheme();
56    }
57}
58
59/* User prefers dark theme and automatic is switched on*/
60@media (prefers-color-scheme: dark){
61    :root[theme="auto"]{
62        .darkTheme();
63    }
64}
65
66/* Admin selected light theme and automatic is switched off*/
67:root[theme="light"]{
68    .lightTheme();
69}
70
71/* Admin selected dark theme and automatic is switched off*/
72:root[theme="dark"]{
73    .darkTheme();
74}
75
76/* Darken the pictures in the dark theme a bit*/
77img{
78    opacity: var(--opacity, 1);
79    transition: var(--transition, none);
80}
81
82img:hover{
83    opacity: 1;
84    transition: opacity ease-in-out 0.25s;
85}