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 /css/theme.css | |
parent | 401aa8724fb641bfae48fabef1d09ed448242cd3 (diff) |
Make the website minimalistic
Diffstat (limited to 'css/theme.css')
-rw-r--r-- | css/theme.css | 85 |
1 files changed, 0 insertions, 85 deletions
diff --git a/css/theme.css b/css/theme.css deleted file mode 100644 index 2d15bc5..0000000 --- a/css/theme.css +++ /dev/null @@ -1,85 +0,0 @@ -/* 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); - } -} |