Merge pull request #7 from With-the-Ranks/dark-mode-toggle

Add dark mode toggle button and update theme styles
With-the-Ranks · Jan 17, 2024 · 19c0811 · 19c0811
2 parents 5772e5e + 134e5d9
commit 19c0811
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 9 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 	<head>
 		<!-- TODO: meta -->
 		<meta charset="UTF-8" />
@@ -24,6 +24,7 @@ const { title } = Astro.props;
 			href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet"
 		/>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 	</head>
 	<body>
 		<slot />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,13 +9,18 @@ import "animate.css";
 	<nav
 		class="max-w-screen-2xl w-10/12 mx-auto pt-10 animate__animated animate__fadeIn animate__delay-2s"
 	>
-		<ul>
-			<li class="inline-block">
-				<a href="/">Home</a>
-			</li>
-			<li class="inline-block"><a href="/work">Our Work</a></li>
-			<li class="inline-block"><a href="/blog">Blog</a></li>
-		</ul>
+		<div class="flex justify-between">
+			<ul class="flex">
+				<li class="inline-block">
+					<a href="/">Home</a>
+				</li>
+				<li class="inline-block"><a href="/work">Our Work</a></li>
+				<li class="inline-block"><a href="/blog">Blog</a></li>
+			</ul>
+			<button id="theme-toggle" class="theme-toggle-button">
+				<i class="fas fa-moon"></i> <!-- Default icon -->
+			</button>
+		</div>
 	</nav>
 
 	<main class="animate__animated animate__fadeIn animate__slow py-20 md:py-40">
@@ -209,4 +214,35 @@ import "animate.css";
 			});
 		});
 	}
+
+	const toggleButton = document.getElementById('theme-toggle') as HTMLButtonElement;
+
+	function updateIcon(theme: 'light' | 'dark') {
+			const toggleIcon = toggleButton.querySelector('i');
+
+			if (theme === 'light') {
+					toggleIcon?.classList.remove('fa-sun');
+					toggleIcon?.classList.add('fa-moon');
+			} else {
+					toggleIcon?.classList.remove('fa-moon');
+					toggleIcon?.classList.add('fa-sun');
+			}
+	}
+	function setTheme(newTheme: 'light' | 'dark') {
+    document.documentElement.setAttribute('data-theme', newTheme);
+    updateIcon(newTheme);
+    localStorage.setItem('theme', newTheme);
+  }
+
+	toggleButton.addEventListener('click', () => {
+			const currentTheme = document.documentElement.getAttribute('data-theme');
+			const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+			setTheme(newTheme);
+	});
+
+  // Check local storage for a stored theme preference
+  document.addEventListener('DOMContentLoaded', () => {
+    const storedTheme = (localStorage.getItem('theme') as 'light' | 'dark') || 'dark';
+    setTheme(storedTheme);
+  });
 </script>
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -19,6 +19,18 @@ Right now we're not using any preprocessors, just CSS variables, but Tailwind is
     --stop-one-color: #00d75a;
     --stop-two-color: #470cec;
 
+    /* Dark theme gradient colors */
+    --gradient-dark-start: rgba(var(--main-bg-rgb), 1);
+    --gradient-dark-end: #0D003E;
+
+    /* Light theme variables */
+    --light-bg-color: #ffffff;
+    --light-text-color: #000000;
+
+    /* Light theme gradient colors */
+    --gradient-light-start: rgba(233, 230, 255, 0); /* Gentle peach/pink */
+    --gradient-light-end: rgba(233, 230, 255, 1); /* Soft blue */
+
     /* Various color combos */
     /* --stop-one-color: #1a0b49;
     --stop-two-color: #10bd6f; */
@@ -33,6 +45,31 @@ Right now we're not using any preprocessors, just CSS variables, but Tailwind is
     --stop-two-color: #d79a00; */
 }
 
+[data-theme="light"] {
+    --main-bg-color: var(--light-bg-color);
+    --main-text-color: var(--light-text-color);
+    --gradient-dark-start: var(--gradient-light-start);
+    --gradient-dark-end: var(--gradient-light-end);
+}
+[data-theme="light"] footer p
+{
+    color: var(--main-text-color)
+}
+[data-theme="light"] #color_picker label{
+    color: #bfd5ff;
+}
+
+[data-theme="light"] header[data-astro-cid-j7pv25f6]::after {
+    background: linear-gradient(
+        var(--gradient-light-start),
+        var(--gradient-light-end) 100%
+    );
+}	
+
+[data-theme="light"] .button {
+    color: #bfd5ff;
+}
+
 /* Fonts */
 /* TODO: Move Lora to self-hosted and remove unused weights. */
 @font-face {
@@ -202,7 +239,7 @@ body {
     color: var(--main-text-color);
     font-family: 'Poppins';
     /* TODO: Move second gradient color to css variables */
-    background: linear-gradient(to bottom, rgba(var(--main-bg-rgb),1) 50%, #0D003E 100%);
+    background: linear-gradient(to bottom, var(--gradient-dark-start) 50%, var(--gradient-dark-end) 100%);
 }
 
 * {