Early dark mode support

site/src/css/colors.css

@@ -0,0 +1,15 @@
+#theme-switcher-icon {
+    font-size: 1rem;
+    margin-right: 5px;
+}
+
+.theme-selector {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.slider-controls {
+    background-color: var( --color-background-accent ) !important;
+}

site/src/css/footer.css

@@ -1,6 +1,6 @@
 footer {
     border-top: solid black 1px;
-    background-color: rgb(226, 226, 226);
+    background-color: var( --color-background-accent );
     width: 100vw;
     margin-top: 40px;
 }
@@ -32,14 +32,14 @@ footer .logo {
 }
 
 .footer-category a {
-    color: black;
+    color: var( --color-text-primary );
     text-decoration: none;
     transition: all 0.5s;
     font-size: 1rem;
 }
 
 .footer-category a:hover {
-    color: rgb(21, 43, 92);
+    color: var( --color-button-hover );
     font-size: 1.1rem;
 }
 
@@ -54,7 +54,7 @@ footer .logo {
     width: 300px;
     height: 400px;
     position: fixed;
-    background-color: rgb(193, 193, 223);
+    background-color: var( --color-background-analytics );
     border-radius: 20px;
     padding: 10px;
     text-align: center;
@@ -70,6 +70,7 @@ footer .logo {
 }
 
 .analytics-button {
+    color: var( --color-text-primary );
     position: absolute;
     top: 10px;
     right: 10px;
@@ -79,12 +80,16 @@ footer .logo {
     cursor: pointer;
 }
 
+#matomo-opt-out {
+    color: var( --color-text-primary ) !important;
+}
+
 .analytics-notice .small-symbol {
     position: fixed;
     bottom: -3px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    background-color: rgb(193, 193, 223);
+    background-color: var( --color-background-analytics );
     border: solid black 1px;
     cursor: pointer;
     transition: all 1s;
@@ -100,4 +105,4 @@ footer .logo {
 .analytics-notice.show .small-symbol {
     bottom: -100px;
     transition-delay: 0s;
-}
+}

site/src/css/nav.css

@@ -23,7 +23,7 @@ nav {
 
 nav a {
     /* TODO: Update colours */
-    color: black;
+    color: var( --color-text-primary );
     text-decoration: none;
 }
 
@@ -48,7 +48,7 @@ nav a {
     display: flex;
     flex-direction: column;
     z-index: 100;
-    background-color: rgb(226, 226, 226);
+    background-color: var( --color-background-accent );
     transition: all 0.5s;
 }
 
@@ -58,7 +58,7 @@ nav a {
     left: 0;
     width: 100vw;
     height: 20vh;
-    background-color: rgb(226, 226, 226);
+    background-color: var( --color-background-accent );
     display: flex;
     align-items: center;
     z-index: 100;
@@ -102,7 +102,7 @@ nav a {
     margin-left: auto;
     margin-right: 20px;
     text-decoration: none;
-    color: black;
+    color: var( --color-text-primary );
     font-size: 5vh;
     cursor: pointer;
     width: 35px;
@@ -118,7 +118,7 @@ nav a {
     display: block;
     width: 100%;
     height: 2px;
-    background-color: black;
+    background-color: var( --color-text-primary );
 }
 
 #line1 {
@@ -166,7 +166,7 @@ nav a {
         flex-direction: row;
         top: 0;
         left: 0;
-        border-bottom: black 1px solid;
+        border-bottom: var( --color-text-primary ) 1px solid;
     }
 
     .nav-menu.slide-up {
@@ -183,7 +183,7 @@ nav a {
         width: max-content;
         transform-origin: top;
         transition: transform 0.5s;
-        background-color: white;
+        background-color: var( --color-background-primary );
         border-radius: 10px;
         padding: 15px;
         z-index: 2;
@@ -212,7 +212,7 @@ nav a {
 
     .nav-link-header::before, .nav-link-header::after {
         opacity: 0;
-        border: white 15px solid;
+        border: var( --color-background-primary ) 15px solid;
         border-top-color: transparent;
         width: 20px;
         height: 20px;
@@ -240,7 +240,7 @@ nav a {
     }
     
     .nav-link-wrapper:hover .nav-link-header {
-        background-color: white;
+        background-color: var( --color-background-primary );
     }
     
     .nav-link-wrapper:hover .nav-link-dropdown {
@@ -255,4 +255,4 @@ nav a {
     .nav-toggle {
         display: none;
     }
-}
+}

site/src/css/style.css

@@ -1,9 +1,48 @@
 @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' );
 @import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' );
 @import url( '/css/nav.css' );
+@import url( '/css/colors.css' );
 @import url( '/css/footer.css' );
 
+/* Color Theme */
+:root, :root.light {
+    --color-text-primary: black;
+    --color-text-accent: #303030;
+    --color-link: rgb(10, 10, 100);
+    --color-background-primary: white;
+    --color-background-accent: rgb(226, 226, 226);
+    --color-background-analytics: rgb(193, 193, 223);
+    --color-button: rgb(21, 43, 92);
+    --color-button-hover: rgb(2, 10, 27);
+}
 
+:root.dark {
+    --color-text-primary: white;
+    --color-text-accent: #b5b5b5;
+    --color-link: rgb(0, 70, 150);
+    --color-background-primary: #151515;
+    --color-background-accent: black;
+    --color-background-analytics: #303030;
+    --color-button: rgb(20, 150, 200);
+    --color-button-hover: rgb(15, 125, 175);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text-primary: white;
+        --color-text-accent: #b5b5b5;
+        --color-link: rgb(0, 70, 150);
+        --color-background-primary: #151515;
+        --color-background-accent: black;
+        --color-background-analytics: #303030;
+        --color-button: rgb(20, 150, 200);
+        --color-button-hover: rgb(15, 125, 175);
+    }
+}
+
+/* 
+ * MAIN 
+ */
 body {
     height: 100%;
     width: 100%;
@@ -14,6 +53,8 @@ body {
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    background-color: var( --color-background-primary );
+    color: var( --color-text-primary );
 }
 
 .material-symbols-outlined {
@@ -39,7 +80,7 @@ body {
 
 .button {
     padding: 20px;
-    background-color: rgb(21, 43, 92);
+    background-color: var( --color-button );
     color: white;
     text-decoration: none;
     border-radius: 10px;
@@ -48,13 +89,13 @@ body {
 
 .button:hover {
     border-radius: 5px;
-    background-color: rgb(2, 10, 27);
+    background-color: var( --color-button-hover );
 }
 
 
 
 .pullquote-lines {
-    border-color: black;
+    border-color: var( --color-text-primary );
 	margin-bottom: 2%;
 	margin-top: 2%;
 	width: 100%;

site/src/footer.html

@@ -14,6 +14,14 @@
             <h3>Info</h3>
             <a href="/about">About janishutz.com</a>
             <a href="/about/aboutme">About Janis Hutz</a>
+            <div class="theme-selector">
+                <span class="material-symbols-outlined" id="theme-switcher-icon">light_mode</span>
+                <select id="theme-select" onchange="changeTheme()">
+                    <option value="auto">Auto</option>
+                    <option value="light_mode">Light</option>
+                    <option value="dark_mode">Dark</option>
+                </select>
+            </div>
         </div>
         <div class="footer-category">
             <h3>Support</h3>
@@ -59,5 +67,35 @@
         if ( !localStorage.getItem( 'analytics-dismissed' ) ) {
             document.getElementById( 'analytics' ).classList.add( 'show' );
         }
+
+        // Themeing
+        let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+        var theme = loadedTheme;
+        let loadTheme = () => {
+            loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+            if ( loadedTheme === 'auto' ) {
+                if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+                    theme = 'dark_mode';
+                } else {
+                    theme = 'light_mode';
+                }
+            }
+            if ( theme === 'dark_mode' ) {
+                document.documentElement.classList.remove( 'light' );
+                document.documentElement.classList.add( 'dark' );
+            } else {
+                document.documentElement.classList.add( 'light' );
+                document.documentElement.classList.remove( 'dark' );
+                theme === 'light_mode';
+            }
+        }
+        loadTheme();
+        document.getElementById( 'theme-select' ).value = loadedTheme;
+
+        function changeTheme () {
+            theme = document.getElementById( 'theme-select' ).value;
+            localStorage.setItem( 'theme', theme );
+            loadTheme();
+        }
     </script>
 </div>

site/src/nav.html

@@ -20,6 +20,7 @@
             <a href="/projects/storagemanager">StorageManager</a>
             <a href="/projects/qrscanner">QR & Barcode Insight</a>
             <a href="/projects/libreevent">libreǝvent</a>
+            <a href="/projects/conductorcalc">ConductorCalc</a>
         </div>
     </div>
 
@@ -102,4 +103,4 @@
     } );
 
     // TODO: Hide menu on when scrolling down
-</script>
+</script>