/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */ :root { /* Light mode */ --light-text: #222430; --light-bg: #f5f6f7; --light-theme: #1f9aff; --light-gray: #707070; /* Dark mode */ --dark-text: #f7f7f7; --dark-bg: #222430; --dark-theme: #bd93f9; --dark-gray: #838383; /* Default mode */ --text-color: var(--dark-text); --bg-color: var(--dark-bg); --theme-color: var(--dark-theme); --gray-color: var(--dark-gray); } #theme-switch:checked ~ #page { --text-color: var(--light-text); --bg-color: var(--light-bg); --theme-color: var(--light-theme); --gray-color: var(--light-gray); } #theme-switch:checked ~ #divbodyholder { --text-color: var(--light-text); --bg-color: var(--light-bg); --theme-color: var(--light-theme); --gray-color: var(--light-gray); } :root { /* Light mode */ --light-switch-text: "тёмный|dark"; /* Dark mode */ --dark-switch-text: "светлый|light"; /* Default mode */ --switch-text: var(--dark-switch-text); } #theme-switch:checked ~ #page { --switch-text: var(--light-switch-text); } #theme-switch:checked ~ #divbodyholder { --switch-text: var(--light-switch-text); } #switch-label::after { content: var(--switch-text); } #theme-switch { position: absolute !important; height: 0px; width: 0px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } @media (prefers-color-scheme: dark) { :root { --switch-text: var(--dark-switch-text); --text-color: var(--dark-text); --bg-color: var(--dark-bg); --theme-color: var(--dark-theme); --gray-color: var(--dark-gray); } } @media (prefers-color-scheme: light) { :root { --switch-text: var(--light-switch-text); --text-color: var(--light-text); --bg-color: var(--light-bg); --theme-color: var(--light-theme); --gray-color: var(--light-gray); } }