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}