diff --git a/_sass/_colors.scss b/_sass/_colors.scss
new file mode 100644
index 00000000..6866e884
--- /dev/null
+++ 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
new file mode 100644
index 00000000..c5017e4e
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 1efb815a..5c6ec288 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
input::-ms-clear,
input::-ms-reveal {
display: none !important;
@@ -6,7 +8,6 @@ input::-ms-reveal {
body {
height: auto;
overflow-x: hidden;
- background-color: $body-background-color;
&.nav-open {
overflow: hidden;
@@ -14,7 +15,8 @@ body {
nav,
header > form,
header > ul,
- div#nav-tree {
+ div#nav-tree,
+ .dark-mode-container {
display: block;
}
@@ -25,7 +27,6 @@ body {
&::before {
content: "";
- background-color: $content-background-color;
position: fixed;
top: 0;
right: 0;
@@ -53,7 +54,6 @@ body {
&::after {
left: 0;
width: $nav-width;
- background-color: $nav-background-color;
}
#search-input,
@@ -64,7 +64,6 @@ body {
&::before {
left: $nav-width;
right: 0;
- background-color: $content-background-color;
}
}
}
@@ -98,7 +97,6 @@ header {
right: 0;
overflow-x: hidden;
z-index: 1;
- background-color: $nav-background-color;
ul {
list-style-type: none;
@@ -110,8 +108,7 @@ header {
padding: $emblem-vertical-padding $emblem-horizontal-padding;
//height: $nav-header-height;
box-sizing: border-box;
- background-color: $brand-colour;
- color: #FFF;
+ color: var(--content-color);
margin: 0;
font-size: 1.7rem;
line-height: 0.8;
@@ -141,7 +138,7 @@ header {
}
.open-nav {
- background-color: transparent;
+ background-color: transparent;
background-size: 100%;
width: $emblem-size;
height: $emblem-size;
@@ -179,8 +176,7 @@ header {
.content {
position: relative;
- background-color: $content-background-color;
- color: $content-color;
+ color: var(--content-color);
h3::before {
content: "";
@@ -234,7 +230,8 @@ header {
nav,
header > form,
header > ul,
-div#nav-tree {
+div#nav-tree,
+.dark-mode-container {
display: none;
@media (min-width: $mobile-break) {
@@ -350,8 +347,6 @@ h3 + .warning {
h4 code {
- background: $nav-background-color;
- color: $content-color;
background-color: transparent;
font-weight: 700;
padding: 0;
@@ -378,7 +373,7 @@ h4 svg {
position: absolute;
top: 5px;
line-height: 1;
- color: $brand-colour;
+ color: var(--brand-color);
padding-left: 5px;
}
@@ -418,7 +413,7 @@ h4 svg {
&:focus {
outline: none;
- border-left-color: $brand-colour;
+ border-left-color: var(--brand-color);
}
}
@@ -446,7 +441,7 @@ h4 svg {
font-weight: bold;
&.major {
- background: $brand-colour;
+ background: var(--brand-color);
color: #fff;
}
}
@@ -456,8 +451,8 @@ blockquote {
padding: 10px 15px;
margin-left: -15px;
margin-right: -10px;
- background-color: $brand-colour-light;
- border-color: $brand-colour;
+ background-color: var(--brand-color);
+ border-color: var(--brand-color);
p:last-child {
margin-bottom: 0;
diff --git a/_sass/_tables.scss b/_sass/_tables.scss
index 9a909863..51e013fa 100644
--- a/_sass/_tables.scss
+++ b/_sass/_tables.scss
@@ -3,14 +3,6 @@ table {
margin-bottom: 1.75em;
}
-tr {
- border-bottom: 1px solid #EEE;
-
- &:nth-child(even) {
- background: #fcfcfc;
- }
-}
-
td, th {
padding: 8px;
text-align: left;
diff --git a/css/main.scss b/css/main.scss
index 83304441..d052fa43 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -7,18 +7,6 @@ sitemap: false
$body-background-color: #FFFFFF;
$content-max-width: 800px;
-$content-color: #222;
-$content-background-color: #fff;
-
-//$brand-colour: #3583d6;
-//$brand-colour: #ADD5FF;
-$brand-colour: #f6fbfe;
-$brand-colour-light: mix($brand-colour, $content-background-color, 10%);
-
-$nav-header-background-color: $brand-colour;
-//$nav-header-height: 60px;
-//$nav-background-color: #f5f5f5;
-$nav-background-color: $brand-colour;
$nav-width: 300px;
$space: 20px;
@@ -33,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;
diff --git a/images/RPI_seal_padding.png b/images/RPI_seal_padding.png
index 7f2fc8ae..bf13f44d 100644
Binary files a/images/RPI_seal_padding.png and b/images/RPI_seal_padding.png differ
diff --git a/images/moon_white.png b/images/moon_white.png
new file mode 100644
index 00000000..953582be
Binary files /dev/null and b/images/moon_white.png differ
diff --git a/images/submitty_logo_white.png b/images/submitty_logo_white.png
new file mode 100644
index 00000000..ebcebcf1
Binary files /dev/null and b/images/submitty_logo_white.png differ
diff --git a/images/sun_black.png b/images/sun_black.png
new file mode 100644
index 00000000..e8801048
Binary files /dev/null and b/images/sun_black.png differ
diff --git a/scripts/main.js b/scripts/main.js
index 68ca8807..2c92b7da 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -57,3 +57,33 @@ function toggle_display(id) {
}
return false;
}
+
+// In your main.js (replace the old `const slider = ...` logic with:)
+document.addEventListener('DOMContentLoaded', () => {
+ const toggle = document.getElementById('dark-mode-toggle');
+ const logo = document.getElementById('site-logo');
+ const icon = document.getElementById('dark-mode-icon');
+ const saved = localStorage.getItem('site_mode') || 'light';
+
+ document.documentElement.setAttribute('data-theme', saved);
+ if (logo) logo.src = saved === 'dark'
+ ? logo.dataset.dark
+ : logo.dataset.light;
+ if (icon) icon.src = saved === 'dark'
+ ? icon.dataset.dark
+ : icon.dataset.light;
+ toggle.checked = (saved === 'dark');
+
+ toggle.addEventListener('change', () => {
+ const mode = toggle.checked ? 'dark' : 'light';
+ localStorage.setItem('site_mode', mode);
+ document.documentElement.setAttribute('data-theme', mode);
+ if (logo) logo.src = mode === 'dark'
+ ? logo.dataset.dark
+ : logo.dataset.light;
+ if (icon) icon.src = mode === 'dark'
+ ? icon.dataset.dark
+ : icon.dataset.light;
+ });
+});
+
+
+
+