Dark Mode Toggles

Dark mode now toggles with a 200ms transition time. TODO: Tidy up using CSS variables and not hard coding. Swap any images/icons or things that don't contrast well with dark mode. Style the button to be a nice clean slider. Make sure button placement is clean on mobile, unsure of how to implement that but will figure it out.

Author: JManion32

_layouts/default.html

@@ -58,7 +58,15 @@ <h1>
               <button type="button" class="open-nav" id="open-nav">
                   <i class="fas fa-bars" style="color: #bbbbbb; font-size: 5.5em;"></i>
                 </button>
-                <a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/images/submitty_logo.png" alt="{{ site.title }} logo"></a>
+                <a href="{{ site.baseurl }}/" class="logo-link">
+                <img
+                    id="site-logo"
+                    src="{{ site.baseurl }}/images/submitty_logo.png"
+                    data-light="{{ site.baseurl }}/images/submitty_logo.png"
+                    data-dark="{{ site.baseurl }}/images/submitty_logo_white.png"
+                    alt="{{ site.title }} logo"
+                >
+                </a>
                 <!--{{ site.title }}-->
             </h1>
             <form action="{{ site.baseurl }}/search/" method="get">

_sass/_colors.scss

@@ -13,10 +13,10 @@
 
 // Dark theme overrides
 :root[data-theme="dark"] {
-  --body-bg:          #121212;
-  --content-bg:       #1e1e1e;
-  --content-color:    #eeeeee;
-  --nav-bg:           #191919;
+  --body-bg:          #36393f;
+  --content-bg:       #36393f;
+  --content-color:    #ffffff;
+  --nav-bg:           #202225;
   --nav-text:         #cccccc;
   --brand-color:      #000000;
 }

_sass/_dark-mode.scss

@@ -0,0 +1,48 @@
+@import "colors";
+
+:root[data-theme="dark"] {
+    body {
+        background-color: var(--body-bg);
+    }
+
+    header {
+        background-color: var(--nav-bg);
+    }
+
+    a {
+        color: var(--content-color);
+    }
+
+    h2 {
+        color: var(--content-color);
+    }
+
+    h3 {
+        color: var(--content-color);
+    }
+
+    #nav-tree .selected {
+        background-color: #535353;
+    }
+
+    #nav-tree .selected a {
+        color: var(--content-color);
+    }
+
+    .arrow {
+        color: var(--content-color);
+    }
+
+    #search-input {
+        background-color: #535353;
+        color: var(--content-color);
+    }
+}
+
+*,
+*::before,
+*::after {
+  transition:
+    color  200ms ease-in-out,
+    background-color 200ms ease-in-out;
+}

_sass/_layout.scss

@@ -8,7 +8,6 @@ input::-ms-reveal {
 body {
 	height: auto;
 	overflow-x: hidden;
-	background-color: var(--body-bg);
 
 	&.nav-open {
 		overflow: hidden;
@@ -27,7 +26,6 @@ body {
 
 	&::before {
 		content: "";
-		background-color: var(--body-bg);
 		position: fixed;
 		top: 0;
 		right: 0;
@@ -55,7 +53,6 @@ body {
 		&::after {
 			left: 0;
 			width: $nav-width;
-			background-color: var(--nav-bg);
 		}
 
 		#search-input,
@@ -66,7 +63,6 @@ body {
 		&::before {
 			left: $nav-width;
 			right: 0;
-			background-color: var(--content-bg);
 		}
 	}
 }
@@ -100,7 +96,6 @@ header {
 	right: 0;
 	overflow-x: hidden;
 	z-index: 1;
-	background-color: var(--nav-bg);
 
 	ul {
 		list-style-type: none;
@@ -112,7 +107,6 @@ header {
 		padding: $emblem-vertical-padding $emblem-horizontal-padding;
 		//height: $nav-header-height;
 		box-sizing: border-box;
-		background-color: var(--brand-color);
 		color: var(--content-color);
 		margin: 0;
 		font-size: 1.7rem;
@@ -181,7 +175,6 @@ header {
 
 .content {
 	position: relative;
-	background-color: var(--content-bg);
 	color: var(--content-color);
 
 	h3::before {
@@ -352,8 +345,6 @@ h3 + .warning {
 
 
 h4 code {
-	background: var(--nav-bg);
-	color: var(--content-color);
 	background-color: transparent;
 	font-weight: 700;
 	padding: 0;

css/main.scss

@@ -21,6 +21,7 @@ $full-width-break: $nav-width + ($space * 4) + $content-max-width;
 @import "code";
 @import "tables";
 @import "layout";
+@import "dark-mode";
 
 header.main-nav > ul {
   margin-bottom: 30px;

images/submitty_logo_white.png

@@ -60,17 +60,22 @@ function toggle_display(id) {
 
 function changeMode() {
   const toggle = document.getElementById('dark-mode-toggle');
-  let saved = localStorage.getItem('site_mode') || 'light';
+  const logo   = document.getElementById('site-logo');
+  let   saved  = localStorage.getItem('site_mode') || 'light';
 
   if (saved !== 'dark') {
     saved = 'dark';
-    toggle.innerHTML = 'Toggle Light Mode';
-    console.log('Setting dark mode');
+    toggle.textContent = 'Toggle Light Mode';
   }
   else {
     saved = 'light';
-    toggle.innerHTML = 'Toggle Dark Mode';
-    console.log('Setting light mode');
+    toggle.textContent = 'Toggle Dark Mode';
+  }
+
+  if (logo) {
+    logo.src = (saved === 'dark')
+      ? logo.dataset.dark
+      : logo.dataset.light;
   }
 
   localStorage.setItem('site_mode', saved);
@@ -81,8 +86,15 @@ window.addEventListener('DOMContentLoaded', () => {
   const html   = document.documentElement;
   const toggle = document.getElementById('dark-mode-toggle');
   const saved  = localStorage.getItem('site_mode') || 'light';
+  const logo   = document.getElementById('site-logo');
 
   html.setAttribute('data-theme', saved);
   toggle.textContent = saved === 'dark' ? 'Light Mode' : 'Dark Mode';
+
+  if (logo) {
+    logo.src = (saved === 'dark')
+      ? logo.dataset.dark
+      : logo.dataset.light;
+  }
 });