Added dark/light toggle button

static/css/base.css

@@ -144,8 +144,8 @@ input[type="radio"] {
     float: left;
     border: 0px;
     border-radius: 10px;
-    padding-top: 25px;
+    height: 56px;
-    padding-bottom: 25px;
+    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);
+}

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;

static/css/light.css

@@ -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;
-}

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';
+    });
+}

templates/index.html

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
-<html lang="{{ lang }}">
+{%- if theme == "light" %}
+<html lang="{{ lang }}" data-theme="dark">
+{%- else %}
+<html lang="{{ lang }}" data-theme="light">
+{%- endif %}
 
 <head>
     <title>{{ title }}</title>
+    <script src="/js/toggle.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
-    {%- if theme == "light" %}
+    <link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}">
-    <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
-    {%- else %}
-    <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
-    {%- endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
@@ -45,13 +46,29 @@
         <div id="footer">
             <div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a
                     href="mailto:{{ mailto }}">Einreichen!</a></div>
-            <div class="separator">&nbsp;</div>
+            <div class="spacer">&nbsp;</div>
+            <div class="toggle">
+                {%- if theme == "light" %}
+                <input type="checkbox" id="toggle_checkbox">
+                {%- else %}
+                <input type="checkbox" id="toggle_checkbox" checked="checked">
+                {%- endif %}
+                <label for="toggle_checkbox" class="toggle_label">
+                    <div id="star">
+                        <div class="star" id="star-1">★</div>
+                        <div class="star" id="star-2">★</div>
+                    </div>
+                    <div id="moon"></div>
+                </label>
+            </div>
             <form action="/" method="get">
                 <input type="hidden" name="t" value="{{ epoch }}">
                 <button id="next" type="submit">{{ more }}</button>
             </form>
         </div>
     </div>
+    <script type="text/javascript">
+        initToggle();
+    </script>
 </body>
-
 </html>