Add Light/Dark Mode Toggle

EmpressAutumn · Oct 27, 2024 · def03b5 · def03b5
1 parent e36c387
commit def03b5
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 48 deletions.
diff --git a/devnotes/index.html b/devnotes/index.html
@@ -3,20 +3,21 @@
 <head>
     <meta charset="UTF-8">
     <title>Dev Notes | Atom596.com</title>
-    <script type="text/javascript" src="/script/topbar.js"></script>
-    <script type="text/javascript" src="/script/lightdark.js"></script>
-    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <!--<script type="module" src="https://md-block.verou.me/md-block.js"></script>
     <script>
         latest = "latest"
         window.addEventListener("load", function() {
             document.getElementById("article").src = latest + ".md"
         })
-    </script>
+    </script>-->
     <link rel="stylesheet" href="/style/devnotes.css">
+    <link id="theme-css" rel="stylesheet" href="/style/light.css">
 </head>
 <body>
     <h1>Dev Notes</h1>
     <div id="topbar"></div>
     <div class="article"><md-block id="article"></md-block></div>
+
+    <script type="text/javascript" src="/script/common.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -3,15 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>Home | Atom596.com</title>
-    <script type="text/javascript" src="/script/topbar.js"></script>
-    <link rel="stylesheet" href="/style/light.css">
     <link rel="stylesheet" href="/style/home.css">
+    <link id="theme-css" rel="stylesheet" href="/style/light.css">
 </head>
 <body>
     <h1>Atom596.com</h1>
     <div id="topbar"></div>
     <div class="plans">
-        <div class="subtitle">
+        <div class="subtitle" id="subtitle">
             <h2>New Website Under Construction</h2>
         </div>
         <div class="column" id="bluesky">
@@ -24,5 +23,7 @@ <h3>Live GitHub Tracker</h3>
             <h3>Live Modrinth Tracker</h3>
         </div>
     </div>
+
+    <script src="/script/common.js"></script>
 </body>
 </html>
diff --git a/script/common.js b/script/common.js
@@ -0,0 +1,46 @@
+window.addEventListener("load", function() {
+    fetch("/topbar.html")
+        .then(response => response.text())
+        .then((data) => {
+            document.getElementById("topbar").innerHTML = data
+
+            const toggleButton = document.getElementById("mode-toggle");
+            if (toggleButton) {
+                toggleButton.addEventListener("click", toggleMode);
+            }
+        })
+})
+
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+// Function to set a cookie
+function setCookie(name, value, days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value}; ${expires}; path=/`;
+}
+
+// Function to toggle between light and dark mode
+function toggleMode() {
+    const currentMode = getCookie("theme") || "light";
+    const newMode = currentMode === "light" ? "dark" : "light";
+    setCookie("theme", newMode, 365);  // Save new mode for one year
+    location.reload();  // Reload page to apply new theme
+}
+
+// Apply the correct CSS based on the theme cookie
+function applyTheme() {
+    const theme = getCookie("theme") || "light";
+    const themeCss = document.getElementById('theme-css');
+
+    console.log(`Applying theme: ${theme}`);
+
+    themeCss.href = "/style/" + theme + ".css";
+}
+
+applyTheme()
diff --git a/script/cookies.js b/script/cookies.js
diff --git a/script/lightdark.js b/script/lightdark.js
diff --git a/script/topbar.js b/script/topbar.js
diff --git a/style/dark.css b/style/dark.css
@@ -1,9 +1,10 @@
 h1 {
     text-align: center;
+    color:palegoldenrod;
 }
 
 body {
-    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/fancy-cushion.pngflower.png");
+    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/fancy-cushion.png");
     background-repeat: repeat;
     font-family: Cambria, serif;
 }
diff --git a/style/topbar.css b/style/topbar.css
@@ -9,3 +9,20 @@
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 90px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 12px 16px;
+    z-index: 1;
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
diff --git a/topbar.html b/topbar.html
@@ -1,7 +1,12 @@
 <link rel="stylesheet" href="/style/topbar.css">
 <div class="topbar">
 <h3 class="links">
-    <a href="https://www.atom596.com/">Home</a>
-    | <a href="https://www.atom596.com/devnotes/">Dev Notes</a>
+    <a href="/">Home</a>
+    | <a href="/devnotes/">Dev Notes</a>
+    | <div class="dropdown">
+    <span>Settings</span>
+    <div class="dropdown-content">
+        <button id="mode-toggle">Switch Mode</button>
+    </div></div>
 </h3>
 </div>