simple dark/light switch

assets/css/styles.css

@@ -13,10 +13,15 @@
     src: url(assets/font/robotomono.woff2) format('woff2');
 }
 
+:root {
+    --bg-color: #fff;
+    --text-color: #000;
+}
+
 * {
     font-family: "DIN-light", sans-serif;
-    background-color: #fff;
+    background-color: var(--bg-color);
-    color: black;
+    color: var(--text-color);
 }
 
 .ascii-art {
@@ -27,7 +32,7 @@
     user-select: none;
 
 
-    color: black;
+    color: var(--text-color);
     transition: color 1s ease-in-out;
 }
 
@@ -37,10 +42,10 @@
 
 @keyframes pulseWhite {
     0% {
-        color: black;
+        color: var(--text-color);
     }
     100% {
-        color: white;
+        color: var(--bg-color);
     }
 }
 
@@ -88,7 +93,7 @@ body {
     font-family: "DIN-light", sans-serif;
     font-size: 23px;
     text-decoration: none; 
-    color: black;
+    color: var(--text-color);
 }
 
 .navbar a::after {
@@ -98,7 +103,7 @@ body {
     bottom: 0;
     width: 0;         
     height: 2px;      
-    background-color: black;
+    background-color: var(--text-color);
     transition: width 0.3s ease; 
 }
 
@@ -138,7 +143,7 @@ body {
 
 .members a {
     text-decoration: none;
-    color: black; 
+    color: var(--text-color);; 
     padding: 5px 10px;
     position: relative;
     transition: all 0.3s ease;
@@ -149,7 +154,7 @@ body {
     content: "";
     position: absolute;
     inset: 0; 
-    border: 2px dashed black;
+    border: 2px dashed var(--text-color);
     opacity: 0;
     transform: scale(0.8);
     transition: all 0.3s ease;
@@ -160,3 +165,12 @@ body {
     opacity: 1;
     transform: scale(1);
 }
+
+.theme-switch {
+    cursor: pointer;
+    text-decoration: wavy;
+}
+
+body.dark-mode .theme-switch {
+    color: var(--text-color);
+}

assets/js/darkmode.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggleText = document.getElementById('themeToggleText');
+    const body = document.body;
+
+    toggleText.addEventListener('click', () => {
+        body.classList.toggle('dark-mode');
+
+        if (body.classList.contains('dark-mode')) {
+            document.documentElement.style.setProperty('--bg-color', '#000');
+            document.documentElement.style.setProperty('--text-color', '#fff');
+            toggleText.textContent = 'DARK';
+        } else {
+            document.documentElement.style.setProperty('--bg-color', '#fff');
+            document.documentElement.style.setProperty('--text-color', '#000');
+            toggleText.textContent = 'LIGHT';
+        }
+    });
+});

index.html

@@ -41,9 +41,14 @@
         <a href="projects.html">PROJECTS</a>
         <a href="https://host.saturn.gay/">HOSTING</a>
     </div>
+
     <div class="rbottom">
+        <div class="theme-switch">
+            <span id="themeToggleText">LIGHT</span>
+        </div>
         <p>© 2022 - 2025 SATURN</p>
         <p>ALL RIGHTS RESERVED</p>
     </div>
+    <script src="assets/js/darkmode.js"></script>
 </body>
 </html>