From 8e99275fcc12f762de3648141b73e134d0355d29 Mon Sep 17 00:00:00 2001
From: suroh <mx@suroh.tk>
Date: Thu, 8 Feb 2024 16:56:00 +0100
Subject: [PATCH] added dark light switch

---
 _includes/components/nav-primary.webc | 17 ++++++++-
 assets/css/main.css                   | 50 +++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
index b67401e..973f98f 100644
--- a/_includes/components/nav-primary.webc
+++ b/_includes/components/nav-primary.webc
@@ -7,7 +7,10 @@
     </template>
   </div>
 
-  <button class="audioToggle"></button>
+  <div class="controls">
+    <button class="audioToggle"></button>
+    <theme-switcher></theme-switcher>
+  </div>
 </nav>
 
 <nav id="sub" slot="subnav">
@@ -31,6 +34,12 @@
 <script src="nav-primary.js" type="module"></script>
 
 <style webc:scoped>
+/*
+*
+* switch element taken from Andy Bell's article
+* which can be found here:
+* https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/
+*/
 /* => HOST */
 :host {
   display: grid;
@@ -64,6 +73,12 @@ nav-link[data-name="<~"] {
   gap: 0.25em;
 }
 
+/* => CONTROLS */
+.controls {
+  display: flex;
+  gap: 0.5em;
+}
+
 /* => AUDIO TOGGLE */
 .audioToggle {
   background: none;
diff --git a/assets/css/main.css b/assets/css/main.css
index 86d7d6a..cfffeda 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,6 +5,25 @@
   scroll-behavior: smooth;
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
 /* --> BASE STYLES <-- */
 :root {
   --page-margin-inline: 1em;
@@ -19,12 +38,6 @@
   --bg-colour-25: #fcfcfc33;
 }
 
-body {
-  font-family: 'fira code', monospace;
-  color: var(--primary-colour);
-  background-color: var(--bg-colour);
-}
-
 @media (prefers-color-scheme: dark) {
   body {
     --primary-colour: var(--neutral-100);
@@ -34,6 +47,31 @@ body {
   }
 }
 
+body.dark {
+  --primary-colour: var(--neutral-100);
+  --primary-colour-25: var(--neutral-100-25);
+  --bg-colour: var(--neutral-900);
+  --bg-colour-25: var(--neutral-900-25);
+}
+
+body.light {
+  --primary-colour: var(--neutral-900);
+  --primary-colour-25: var(--neutral-900-25);
+  --bg-colour: #fcfcfcff;
+  --bg-colour-25: #fcfcfc33;
+}
+
+body {
+  font-family: 'fira code', monospace;
+  color: var(--primary-colour);
+  background-color: var(--bg-colour);
+}
+
+input {
+  background-color: var(--bg-colour);
+  color: var(--primary-colour);
+}
+
 p {
   max-width: 80ch;
 }