toggle button!

assets/scss/colors.scss

@@ -1,11 +1,11 @@
-$light-bg:#515262;
+$light-bg:  #f0f0eb ;
-$light-bg-alt: #caa05a;
+$light-bg-alt:   #545155  ;
-$light-fg: #c9cca1;
+$light-fg:  #545155 ;
-$light-ln: #ab5675;
+$light-ln:   #d8828e ;
-$light-active: #72dcbb;
+$light-active:  #7be098 ;
 
-$dark-bg:  #292831;
+$dark-bg:  #2e4052 ;
-$dark-bg-alt:  #333f58;
+$dark-bg-alt:  #c97064 ;
 $dark-fg: #fbbbad;
 $dark-ln: #ee8695;
 $dark-active: #4a7a96;
@@ -52,3 +52,20 @@ footer a {
   color: $dark-bg;
   background-color: $dark-bg-alt;
 }
+
+.togglelabel {
+  &.light {
+    background-color: $light-bg;
+  }
+  background-color: $dark-bg;
+}
+
+.togglelabel.light::after{
+  background-color: $light-fg;
+  color: $light-bg;
+}
+
+.togglelabel::after{
+  background-color: $dark-fg;
+  color: $dark-bg;
+}

assets/scss/font.scss

@@ -1,18 +1,33 @@
+$huge: 42pt;
+$large: 24pt;
+$big: 20pt;
+$medium: 16pt;
+$small: 12pt;
+
 @font-face {
     font-family: CaskaydiaCove;
     src: url(/font/CaskaydiaCove.ttf);
 }
 
+@font-face {
+    font-family: CaskaydiaCoveMono;
+    src: url(/font/CaskaydiaCoveMono.ttf);
+}
+
 * {
     font-family: CaskaydiaCove;
-    font-size: 16pt;
+    font-size: $small;
     }
-h1 {font-size: 42pt;}
+h1 {font-size: $huge;}
 
 a {
     text-decoration: none;
 }
 
-footer {
+footer * {
-    font-size: 20pt;
+    font-size: $big;
+}
+
+label::after{
+    font-family: CaskaydiaCoveMono;
 }

assets/scss/layout.scss

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
   flex: auto;
 }
@@ -12,19 +13,36 @@ footer {
   justify-content: center;
 }
 
-#footer-content{
-    width: 100%;
-}
-
 #content {
   min-height: 90%;
+  right: auto;
+}
+
+#footer-left {
+  margin-left: 24pt;
+  justify-self: left;
+  margin-right: auto;
 }
 
 #footer-right {
+  margin-left: auto;
   justify-self: right;
+  margin-right: 24pt;
+  align-content: center;
+}
+
+#footer-center {
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  justify-self: center;
 }
 
 * {
   padding: 0;
   margin: 0;
 }
+
+#footer-right *{
+  display: flex;
+}

assets/scss/main.scss

@@ -1,3 +1,4 @@
 @import "./colors";
-@import "./font";
 @import "./layout";
+@import "./font";
+@import "./style";

assets/scss/style.scss

@@ -0,0 +1,42 @@
+$radius: 24pt;
+$toggle-width: 42pt;
+$toggle-height: 24pt;
+
+input[type="checkbox"]{
+    cursor: pointer;
+}
+.toggleinput{
+    visibility: hidden;
+}
+
+.togglelabel{
+    width: $toggle-width;
+    height: 24pt;
+    border-radius: $radius;
+    cursor: pointer;
+}
+
+.togglelabel::after{
+    left: calc(100% - 66pt);
+    content: "";
+    position: absolute;
+    height: $toggle-height;
+    width: $toggle-height;
+    border-radius: 100pt;
+    transition: 0.3s;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+}
+
+input:checked + label:after{
+    left: calc(100% - 48pt);
+}
+
+.togglelabel::after{
+    content: "滛";
+}
+
+input:checked + label::after{
+    content: "";
+}

layouts/partials/footer.html

@@ -1,14 +1,16 @@
 <footer class="colorswitch">
-<div id="footer-center">
+<span id="footer-left"></span>
-<nav id="footer-nav">
+<span id="footer-center">
+<nav id="footer-nav" aria-label="navigation">
     {{ $currentPage := . }}
     {{ range .Site.Menus.nav }}
     <a class="footer-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
     {{ end }}
 </nav>
-</div>
+</span>
-<div id="footer-right">
+<span id="footer-right">
-    <input type="checkbox" id="darkmode-toggle">
+        <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
-</div>
+        <label class="togglelabel colorswitch" for="darkmode-toggle"></label>
+</span>
 </footer>
 <script src="/js/darkmode.js"></script>