diff options
author | Ivan Davydov <lotigara@lotigara.ru> | 2025-06-21 18:29:46 +0300 |
---|---|---|
committer | Ivan Davydov <lotigara@lotigara.ru> | 2025-06-21 18:29:46 +0300 |
commit | 01773eabc92ef6ee90657e8fa179e36e52464f4e (patch) | |
tree | 18586cf57fc3c0ef2828f9d405ceb73c61bc080a /archive/css/theme.css | |
parent | 401aa8724fb641bfae48fabef1d09ed448242cd3 (diff) |
Make the website minimalistic
Diffstat (limited to 'archive/css/theme.css')
-rw-r--r-- | archive/css/theme.css | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/archive/css/theme.css b/archive/css/theme.css new file mode 100644 index 0000000..2d15bc5 --- /dev/null +++ b/archive/css/theme.css @@ -0,0 +1,85 @@ +/* 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); + } +} |