Submitty · bmcutler · Jul 22, 2025 · Jul 17, 2025 · Jul 17, 2025 · Jul 18, 2025
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -40,6 +40,7 @@ GEM
     faraday-net_http (3.1.1)
       net-http
     ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x64-mingw-ucrt)
     ffi (1.17.0-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
     gemoji (4.1.0)
@@ -240,6 +241,8 @@ GEM
       uri
     nokogiri (1.16.7-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.16.7-x64-mingw-ucrt)
+      racc (~> 1.4)
     nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
     octokit (4.25.1)
@@ -277,18 +280,21 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (1.8.0)
     uri (0.13.0)
+    wdm (0.2.0)
     webrick (1.9.1)
     yell (2.2.2)
 
 PLATFORMS
   arm64-darwin-22
   arm64-darwin-23
+  x64-mingw-ucrt
   x86_64-linux
 
 DEPENDENCIES
   github-pages (= 232)
   html-proofer (~> 3.19.4)
   json
+  wdm (>= 0.1.1)
   webrick (~> 1.9)
 
 BUNDLED WITH

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,6 +6,17 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
+        <script>
+            const m = localStorage.getItem('site_mode') || 'light';
+            document.documentElement.setAttribute('data-theme', m);
+            const logo = document.getElementById('site-logo');
+            if (logo) {
+            logo.src = m === 'dark'
+                ? logo.dataset.dark
+                : logo.dataset.light;
+            }
+        </script>
+
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,400italic,600,600italic,700,700italic|Inconsolata:400,700">
         <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
         <link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
@@ -48,23 +59,44 @@ <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">
                 <input type="text" name="q" id="search-input" placeholder="Search" aria-label="Search content on submitty.org">
                 <input type="submit" value="Search" style="display: none;">
             </form>
             <div id="nav-tree" class="menus medbg noxscroll mobile-invisible mobile-toggle">
-              <div id="nav-tree-contents" class="medbg noxscroll mobile-invisible mobile-toggle">
-              </div>
+              <div id="nav-tree-contents" class="medbg noxscroll mobile-invisible mobile-toggle"></div>
               <div>&nbsp;</div>
             </div>
             <script type="text/javascript">
               /* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
               $(document).ready(function(){initNavTree('{{page.url}}',''); });
               /* @license-end */
             </script>
+            <div class="dark-mode-container mobile-invisible mobile-toggle">
+                <label class="dark-mode-switch">
+                <input type="checkbox" id="dark-mode-toggle" />
+                    <span class="slider">
+                        <img
+                        id="dark-mode-icon"
+                        src="/images/sun_black.png"
+                        data-light="/images/sun_black.png"
+                        data-dark="/images/moon_white.png"
+                        alt="mode icon"
+                        />
+                    </span>
+                </label>
+            </div>
         </header>
         <section class="main">
             <div class="page-header">

diff --git a/_sass/_colors.scss b/_sass/_colors.scss
@@ -0,0 +1,41 @@
+// _sass/_colors.scss
+
+// Light theme tokens
+:root {
+  --body-bg:           #ffffff;
+  --content-bg:        #ffffff;
+  --link-color:        #4A4A4A;
+  --standard-black:    #000000;
+  --content-color:     #222222;
+  --nav-bg:            #f6fbfe;
+  --nav-text:          #666666;
+  --nav-selected:      #d9edf7;
+  --brand-color:       #f6fbfe;
+  --page-header:       #888888;  
+  --inline-code-color: #393318;
+  --inline-code-bg:    #F0F0F0;
+  --even-table:        #FCFCFC;
+
+  --toggle-thumb: #ffffff;
+  --toggle-track: #ccc;
+}
+
+// Dark theme overrides
+:root[data-theme="dark"] {
+  --body-bg:           #36393f;
+  --content-bg:        #36393f;
+  --link-color:        #bbbbbb;
+  --standard-black:    #ffffff;
+  --content-color:     #ffffff;
+  --nav-bg:            #202225;
+  --nav-text:          #cccccc;
+  --nav-selected:      #535353;
+  --brand-color:       #000000;
+  --page-header:       #999999;
+  --inline-code-color: #FFFFFF;
+  --inline-code-bg:    #535353;
+  --even-table:        #2f3137;
+
+  --toggle-thumb: #000000;
+  --toggle-track:  #4d4d4d;
+}
diff --git a/_sass/_dark-mode.scss b/_sass/_dark-mode.scss
@@ -0,0 +1,142 @@
+// This page overrides all of the existing colors on the site with
+// dynamic CSS variables.
+
+@import "colors";
+
+body {
+    background-color: var(--body-bg);
+}
+
+header.main-nav {
+    background-color: var(--nav-bg);
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    color: var(--link-color);
+}
+
+a:hover {
+    color: var(--standard-black) !important;
+}
+
+.page-header h2 {
+    color: var(--page-header);
+}
+
+h2 {
+    color: var(--content-color);
+}
+
+h3 {
+    color: var(--content-color);
+}
+
+h4 {
+    color: var(--content-color);
+}
+
+#nav-tree .selected {
+    background-color: var(--nav-selected) !important;
+}
+
+#nav-tree .selected a {
+    color: var(--content-color) !important;
+    text-shadow: none !important;
+    font-weight: bold;
+}
+
+.arrow {
+    color: var(--content-color) !important;
+}
+
+#search-input {
+    background-color: var(--content-bg);
+    color: var(--content-color);
+}
+
+// Inline code snippets, such as on the Contact Us page
+pre, code, tt {
+    background-color: var(--inline-code-bg);
+    color: var(--inline-code-color);
+}
+
+button {
+    background-color: transparent !important;
+}
+
+tr {
+	border-bottom: 1px solid #EEE;
+
+	&:nth-child(even) {
+		background: var(--even-table);
+	}
+}
+
+span[id^="mytag"] {
+    background-color: var(--inline-code-bg) !important;
+    color: var(--inline-code-color) !important;
+    padding: 10px;
+}
+
+*,
+*::before,
+*::after {
+  transition:
+    color  200ms ease-in-out,
+    background-color 200ms ease-in-out;
+}
+
+.dark-mode-container {
+  margin-top: auto;
+  margin-bottom: 20px;
+  align-self: center;
+}
+
+.dark-mode-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+  margin-bottom: 20px;
+  align-self: center;
+}
+
+.dark-mode-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.dark-mode-switch .slider {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  background-color: var(--toggle-track);
+  border-radius: 34px;
+  transition: background-color 0.3s ease;
+}
+
+.dark-mode-switch .slider img {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background-color: var(--toggle-thumb);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  user-select: none;
+  -webkit-user-drag: none;
+  display: none;
+}
+
+.dark-mode-switch .slider img[src] {
+  display: block;
+}
+
+.dark-mode-switch input:checked + .slider img {
+  transform: translateX(22px);
+}