From 834df78310c6632fbe83957c94c08cc5f5d611fa Mon Sep 17 00:00:00 2001 From: gpkvt Date: Sun, 4 Jun 2023 01:19:02 +0200 Subject: [PATCH] Added dark/light toggle button --- static/css/base.css | 121 +++++++++++++++++++++++++++- static/css/{dark.css => colors.css} | 25 ++++++ static/css/light.css | 24 ------ static/js/toggle.js | 34 ++++++++ templates/index.html | 33 ++++++-- 5 files changed, 203 insertions(+), 34 deletions(-) rename static/css/{dark.css => colors.css} (56%) delete mode 100644 static/css/light.css create mode 100644 static/js/toggle.js diff --git a/static/css/base.css b/static/css/base.css index 2f4bc80..bc8c7e3 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -144,8 +144,8 @@ input[type="radio"] { float: left; border: 0px; border-radius: 10px; - padding-top: 25px; - padding-bottom: 25px; + height: 56px; + margin-top: 7px; background-color: var(--bg-nxt); color: var(--fg-nxt); font-weight: bold; @@ -179,6 +179,7 @@ input[type="radio"] { #next { min-width: 100%; + margin-top: 20px; } #questions { @@ -194,6 +195,14 @@ input[type="radio"] { .b { font-size: small; } + + .toggle { + min-width: 100%; + } + + .toggle_label { + min-width: 100%;; + } } @media (prefers-color-scheme: dark) { @@ -246,3 +255,111 @@ input[type="radio"] { color: var(--fg-lnk) !important; } } + +#toggle_checkbox { + display: none; +} + +.spacer { + width: 10%; + float: left; +} + +.toggle { + width: 10%; + float: left; + display: none; +} + +.toggle_label { + display: block; + position: relative; + top: 35px; + right: 0; + left: 0; + width: 80%; + height: 56px; + margin: 0 auto; + background-color: var(--bg-ab); + border-radius: 25px; + transform: translateY(-50%); + cursor: pointer; + transition: 0.3s ease background-color; + overflow: hidden; +} + +#star { + position: absolute; + top: 13px; + left: 13px; + width: 30px; + height: 30px; + transform: scale(1); + border-radius: 50%; + transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color; + z-index: 1; +} + +#star-1 { + position: relative; +} + +#star-2 { + position: absolute; + transform: rotateZ(36deg); +} + +.star { + top: 0; + left: -7px; + font-size: 54px; + line-height: 28px; + color: var(--bg-a); + transition: 0.3s ease color; +} + +#moon { + position: absolute; + bottom: -52px; + right: 8px; + width: 40px; + height: 40px; + background-color: var(--bg-a); + border-radius: 50%; + transition: 0.3s ease bottom; +} + +#moon:before { + content: ""; + position: absolute; + top: -12px; + left: -17px; + width: 40px; + height: 40px; + background-color: var(--bg-ab); + border-radius: 50%; + transition: 0.3s ease background-color; +} + +#toggle_checkbox:checked+label { + background-color: var(--bg-b); +} + +#toggle_checkbox:checked+label #star { + top: 0px; + left: 640px; + transform: scale(0.3); + background-color: var(--bg); +} + +#toggle_checkbox:checked+label .star { + color: var(--bg-a); +} + +#toggle_checkbox:checked+label #moon { + bottom: 8px; +} + +#toggle_checkbox:checked+label #moon:before { + background-color: var(--bg-b); +} \ No newline at end of file diff --git a/static/css/dark.css b/static/css/colors.css similarity index 56% rename from static/css/dark.css rename to static/css/colors.css index 71e48fa..2cbcb87 100644 --- a/static/css/dark.css +++ b/static/css/colors.css @@ -1,4 +1,29 @@ :root { + --bg: #E7E5E2; + --fg: #243233; + --br: #243233; + --fg-lnk: #8FA3A9; + + --bg-header: #8FA3A9; + --fg-header: #243233; + --bg-ab: #89A6C0; + + --bg-a: #F7D214; + --fg-a: #243233; + --bg-b: #243233; + --fg-b: #F7D214; + + --bg-ab-chkd: #B3472B; + --fg-ab-chkd: #E7E5E2; + --br-ab-chkd: #000000; + + --fg-sep: #243233; + --fg-que: #243233; + --bg-nxt: #8FA3A9; + --fg-nxt: #243233; +} + +[data-theme="dark"] { --bg: #243233; --fg: #E7E5E2; --br: #E7E5E2; diff --git a/static/css/light.css b/static/css/light.css deleted file mode 100644 index e6dbae5..0000000 --- a/static/css/light.css +++ /dev/null @@ -1,24 +0,0 @@ -:root { - --bg: #E7E5E2; - --fg: #243233; - --br: #243233; - --fg-lnk: #8FA3A9; - - --bg-header: #8FA3A9; - --fg-header: #243233; - --bg-ab: #89A6C0; - - --bg-a: #F7D214; - --fg-a: #243233; - --bg-b: #243233; - --fg-b: #F7D214; - - --bg-ab-chkd: #B3472B; - --fg-ab-chkd: #E7E5E2; - --br-ab-chkd: #000000; - - --fg-sep: #243233; - --fg-que: #243233; - --bg-nxt: #8FA3A9; - --fg-nxt: #243233; -} diff --git a/static/js/toggle.js b/static/js/toggle.js new file mode 100644 index 0000000..4b81c65 --- /dev/null +++ b/static/js/toggle.js @@ -0,0 +1,34 @@ +function initToggle() { + const toggleSwitch = document.querySelector('.toggle input[type="checkbox"]'); + const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; + + function switchTheme(e) { + if (e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); //add this + } + else { + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); //add this + } + } + + toggleSwitch.addEventListener('change', switchTheme, false); + + if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + + if (currentTheme === 'dark') { + toggleSwitch.checked = true; + } else { + toggleSwitch.checked = false; + } + } + + document.querySelectorAll('.spacer').forEach(function (el) { + el.style.display = 'none'; + }); + document.querySelectorAll('.toggle').forEach(function (el) { + el.style.display = 'unset'; + }); +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index c8e29bc..ccc2cac 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,14 +1,15 @@ - +{%- if theme == "light" %} + +{%- else %} + +{%- endif %} {{ title }} + - {%- if theme == "light" %} - - {%- else %} - - {%- endif %} + @@ -45,13 +46,29 @@ + - \ No newline at end of file