.lightTheme{
    --text: __text__;
    --background: __background__;
    --text_alt: __text_alt__;
    --background_alt: __background_alt__;
    --text_neu: __text_neu__;
    --background_neu: __background_neu__;
    --border: __border__;
    --highlight: __highlight__;
    --existing: __existing__;
    --missing: __missing__;
    --link: __link__;
    --background_site: __background_site__;
    --search-png: url(images/search.png);
    --toc-arrows: url(images/toc-arrows.png);
    --pre_text: __pre_text_color__;
    --pre_background: __pre_background_color__;
    --opacity: 1;
    --transition: none;
    --selection_color: __selection_color__ ;
    --selection_background: __selection_background_color__;
    --scrollbar_track: __scrollbar_color_track__;
    --scrollbar_thumb: __scrollbar_color_thumb__;
}

.darkTheme{
    --text: __text_color_dark__;
    --background: __background_color_dark__;
    --text_alt: __text_alt_color_dark__;
    --background_alt: __background_alt_color_dark__;
    --text_neu: __text_neu_color_dark__;
    --background_neu: __background_neu_color_dark__;
    --border: __border_color_dark__;
    --highlight: __highlight_color_dark__;
    --existing: __existing_color_dark__;
    --missing: __missing_color_dark__;
    --link: __link_color_dark__;
    --background_site: __background_site_color_dark__;
    --search-png: url(images/search-dark.png);
    --toc-arrows: url(images/toc-arrows-dark.png);
    --pre_text: __pre_text_color_dark__;
    --pre_background: __pre_background_color_dark__;
    --opacity: 0.8;
    --transition: opacity ease-in-out 0.25s;
    --selection_color: __selection_color_dark__ ;
    --selection_background: __selection_background_color_dark__;
    --scrollbar_track: __scrollbar_track_color_dark__;
    --scrollbar_thumb: __scrollbar_thumb_color_dark__;
}


/* User prefers light theme and automatic is switched on*/
@media (prefers-color-scheme: light){
    :root[theme="auto"]{
        .lightTheme();
    }
}

/* User prefers dark theme and automatic is switched on*/
@media (prefers-color-scheme: dark){
    :root[theme="auto"]{
        .darkTheme();
    }
}

/* Admin selected light theme and automatic is switched off*/
:root[theme="light"]{
    .lightTheme();
}

/* Admin selected dark theme and automatic is switched off*/
:root[theme="dark"]{
    .darkTheme();
}

/* Darken the pictures in the dark theme a bit*/
img{
    opacity: var(--opacity, 1);
    transition: var(--transition, none);
}

img:hover{
    opacity: 1;
    transition: opacity ease-in-out 0.25s;
}