Add a toggle between dark and light theme

backend/scss/main.scss

@@ -4,6 +4,8 @@
 @use 'modal-dialog.scss';
 @use 'calendar.scss';
 
+$dark-theme: false !default;
+
 $color-1: #B29B89;
 $color-2: #89B29B;
 $color-3: #9B89B2;
@@ -13,6 +15,17 @@ $text-highlight: color.adjust($color-1, $lightness: +30%);
 $link-color: color.adjust($color-3, $lightness: -25%);
 $link-hover-color: color.adjust($color-3, $lightness: +20%);
 
+@if $dark-theme {
+    $text-color: color.adjust($color-1, $lightness: -10%);
+    $text-highlight: color.adjust($color-1, $lightness: +10%);
+    $link-color: color.adjust($color-3, $lightness: -5%);
+    $link-hover-color: color.adjust($color-3, $lightness: +10%);
+
+    $color-1: color.adjust($color-1, $lightness: -47%);
+    $color-2: color.adjust($color-2, $lightness: -47%);
+    $color-3: color.adjust($color-2, $lightness: -47%);
+}
+
 * {
     margin: 5px;
     padding: 0px;
@@ -271,4 +284,82 @@ body {
         //     }
         // }
     }
+}
+
+// Customize some form elements.
+#toggle-theme {
+    // font-size: 17px;
+    position: relative;
+    display: inline-block;
+    width: 3.5em;
+    height: 2em;
+
+    // Hide default HTML checkbox
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    // The slider.
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #223243;
+        transition: .4s;
+        border-radius: 30px;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 1.4em;
+        width: 1.4em;
+        border-radius: 20px;
+        left: 0.3em;
+        bottom: 0.3em;
+        background-color: #223243;
+        box-shadow: inset 2px -2px 0 1.8px #fff;
+        transition: .4s;
+        animation: anima1 0.3s linear;
+    }
+
+    @keyframes anima1 {
+        0% {
+            transform: translateX(1.5em);
+        }
+
+        80% {
+            transform: translateX(-0.3em);
+        }
+
+        100% {
+            transform: translateX(0em);
+        }
+    }
+
+    input:checked+.slider:before {
+        background-color: yellow;
+        box-shadow: none;
+        transform: translateX(1.5em);
+        animation: anima 0.3s linear;
+    }
+
+    @keyframes anima {
+        0% {
+            transform: translateX(0px)
+        }
+
+        80% {
+            transform: translateX(1.6em)
+        }
+
+        100% {
+            transform: translateX(1.4em)
+        }
+    }
 }

backend/scss/style_dark.scss

@@ -0,0 +1 @@
+@use 'main.scss' with ($dark-theme: true);

backend/scss/style_light.scss

@@ -0,0 +1 @@
+@use 'main.scss' with ($dark-theme: false);