style: toggle for dark/light mode integrated

design/src/styles/variants/variables-aaron.css

@@ -12,23 +12,71 @@
 	--bg-color-simple-code: var(--secondary-color-light);
 	--link-color: var(--primary-font-color);
 
+	/**
+	* Dark color specifications
+	*/
+	--dark-primary-color: #f2f0e9;
+	--dark-primary-color-dark: #e8c872;
+	--dark-primary-color-light: #fff8e2;
+	--dark-secondary-color: #0b1733;
+	--dark-secondary-color-light: #637a9f;
+	--dark-secondary-color-ultra-light: #c9d7dd;
+	--dark-background-color: var(--dark-secondary-color);
+	--dark-heading-color: var(--dark-primary-color);
+	--dark-primary-font-color: var(--dark-primary-color-dark);
+	--dark-bg-color-simple-code: #172f69;
+
+	@media (prefers-color-scheme: dark) {
+		--primary-color: var(--dark-primary-color);
+		--primary-color-dark: var(--dark-primary-color-dark);
+		--primary-color-light: var(--dark-primary-color-light);
+		--secondary-color: var(--dark-secondary-color);
+		--secondary-color-light: var(--dark-secondary-color-light);
+		--secondary-color-ultra-light: var(--dark-secondary-color-ultra-light);
+
+		--background-color: var(--dark-secondary-color);
+		--heading-color: var(--dark-primary-color);
+		--primary-font-color: var(--dark-primary-color-dark);
+		--bg-color-simple-code: var(--dark-bg-color-simple-code);
+	}
+}
+
+.dark-mode {
+	--primary-color: var(--dark-primary-color);
+	--primary-color-dark: var(--dark-primary-color-dark);
+	--primary-color-light: var(--dark-primary-color-light);
+	--secondary-color: var(--dark-secondary-color);
+	--secondary-color-light: var(--dark-secondary-color-light);
+	--secondary-color-ultra-light: var(--dark-secondary-color-ultra-light);
+
+	--background-color: var(--dark-secondary-color);
+	--heading-color: var(--dark-primary-color);
+	--primary-font-color: var(--dark-primary-color-dark);
+	--bg-color-simple-code: var(--dark-bg-color-simple-code);
+
+	--link-color: var(--primary-font-color);
 	--nav-margin: 1rem 0 1rem 0;
 	--nav-border: 1px solid var(--primary-color-dark);
 	--nav-border-radius: 8px;
-
 	--entry-date-margin: 0 0 0 0;
+}
 
-	@media (prefers-color-scheme: dark) {
-		--primary-color: #f2f0e9;
-		--primary-color-dark: #e8c872;
-		--primary-color-light: #fff8e2;
-		--secondary-color: #0b1733;
-		--secondary-color-light: #637a9f;
-		--secondary-color-ultra-light: #c9d7dd;
-
-		--background-color: var(--secondary-color);
-		--heading-color: var(--primary-color);
-		--primary-font-color: var(--primary-color-dark);
-		--bg-color-simple-code: #172f69;
-	}
+.light-mode {
+	--primary-color: #4f627f;
+	--primary-color-dark:#0b1733;
+	--primary-color-light: #c9d7dd;
+	--secondary-color: #e8c872;
+	--secondary-color-light: #fff3cf;
+	--secondary-color-ultra-light: #ffffff;
+
+	--background-color: var(--secondary-color-ultra-light);
+	--heading-color: var(--primary-color-dark);
+	--primary-font-color: var(--primary-color-dark);
+	--bg-color-simple-code: var(--secondary-color-light);
+	--link-color: var(--primary-font-color);
+
+	--nav-margin: 1rem 0 1rem 0;
+	--nav-border: 1px solid var(--primary-color-dark);
+	--nav-border-radius: 8px;
+	--entry-date-margin: 0 0 0 0;
 }

personal/src/components/ColorSchemeToggle.astro

@@ -0,0 +1,57 @@
+---
+
+---
+
+<div class="theme-switch-container">
+  <a href="#" id="color-scheme-toggle">Toggle Color Scheme</a>
+</div>
+<style>
+  .theme-switch-container {
+    position: fixed;
+    right: 0;
+    top: 0;
+    font-size: 0.8rem;
+    margin: 8px 8px 0 0;
+  }
+  /**
+  * On smaller screens the toggle should be centered on top of the page
+  */
+  @media only screen and (max-width: 64em) {
+    .theme-switch-container {
+      width: 100%;
+      position: initial;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
+<script is:inline>
+  const darkModeToggle = document.getElementById("color-scheme-toggle");
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+
+  let isDarkMode = prefersDarkScheme.matches;
+
+  const toggleDarkMode = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    isDarkMode = !isDarkMode;
+    if (isDarkMode) {
+      document.body.classList.add("dark-mode");
+      document.body.classList.remove("light-mode");
+    } else {
+      document.body.classList.add("light-mode");
+      document.body.classList.remove("dark-mode");
+    }
+  };
+
+  darkModeToggle.addEventListener("click", toggleDarkMode);
+
+  // Initialize based on system preference
+  if (prefersDarkScheme.matches) {
+    document.body.classList.remove("light-mode");
+    document.body.classList.add("dark-mode");
+  } else {
+    document.body.classList.add("light-mode");
+    document.body.classList.remove("dark-mode");
+  }
+</script>

personal/src/layouts/Layout.astro

@@ -9,6 +9,7 @@ import "../styles/index.css";
 import "../styles/fonts/mona-sans.css";
 
 import Nav from "../components/Nav.astro";
+import ColorSchemeToggle from "../components/ColorSchemeToggle.astro";
 ---
 
 <!doctype html>
@@ -41,6 +42,7 @@ import Nav from "../components/Nav.astro";
     <title>{title}</title>
   </head>
   <body>
+    <ColorSchemeToggle />
     <Nav />
     <slot />
     <script is:inline>