Skip to content

Commit dd5a83d

Browse files
JManion32JManion32
committed
Fully Implemented Dark Mode
Now includes a toggle in the sidebar.
1 parent 2b56d90 commit dd5a83d

File tree

9 files changed

+196
-85
lines changed

9 files changed

+196
-85
lines changed

‎_layouts/default.html‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
// grab or default to 'light'
1212
const m = localStorage.getItem('site_mode') || 'light';
1313
document.documentElement.setAttribute('data-theme', m);
14+
document.getElementById('site-logo').src = (m === 'dark')
15+
? document.getElementById('site-logo').dataset.dark
16+
: document.getElementById('site-logo').dataset.light;
1417
})();
1518
</script>
1619

@@ -52,7 +55,6 @@
5255

5356
<body>
5457
<a href="https://github.com/Submitty" class="github-corner" aria-label="View Submitty on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#0a6496; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" class="octo-background"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
55-
<button id="dark-mode-toggle" onClick="changeMode()">Dark Mode Toggle</button>
5658
<header class='main-nav'>
5759
<h1>
5860
<button type="button" class="open-nav" id="open-nav">
@@ -74,15 +76,28 @@ <h1>
7476
<input type="submit" value="Search" style="display: none;">
7577
</form>
7678
<div id="nav-tree" class="menus medbg noxscroll mobile-invisible mobile-toggle">
77-
<div id="nav-tree-contents" class="medbg noxscroll mobile-invisible mobile-toggle">
78-
</div>
79+
<div id="nav-tree-contents" class="medbg noxscroll mobile-invisible mobile-toggle"></div>
7980
<div>&nbsp;</div>
8081
</div>
8182
<script type="text/javascript">
8283
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
8384
$(document).ready(function(){initNavTree('{{page.url}}',''); });
8485
/* @license-end */
8586
</script>
87+
<div class="dark-mode-container mobile-invisible mobile-toggle">
88+
<label class="dark-mode-switch">
89+
<input type="checkbox" id="dark-mode-toggle" />
90+
<span class="slider">
91+
<!-- actual image instead of pseudo-element -->
92+
<img
93+
id="dark-mode-icon"
94+
data-light="/images/sun_black.png"
95+
data-dark="/images/moon_white.png"
96+
alt="mode icon"
97+
/>
98+
</span>
99+
</label>
100+
</div>
86101
</header>
87102
<section class="main">
88103
<div class="page-header">

‎_sass/_colors.scss‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,40 @@
22

33
// Light theme tokens
44
:root {
5-
--body-bg: #ffffff;
6-
--content-bg: #ffffff;
7-
--content-color: #222222;
8-
--nav-bg: #f6fbfe;
9-
--nav-text: #666666;
5+
--body-bg: #ffffff;
6+
--content-bg: #ffffff;
7+
--link-color: #4A4A4A;
8+
--standard-black: #000000;
9+
--content-color: #222222;
10+
--nav-bg: #f6fbfe;
11+
--nav-text: #666666;
12+
--nav-selected: #d9edf7;
1013
--brand-color: #f6fbfe;
11-
/* …add any others you need… */
14+
--page-header: #888888;
15+
--inline-code-color: #393318;
16+
--inline-code-bg: #F0F0F0;
17+
--even-table: #FCFCFC;
18+
19+
--toggle-thumb: #ffffff;
20+
--toggle-track: #ccc;
1221
}
1322

1423
// Dark theme overrides
1524
:root[data-theme="dark"] {
16-
--body-bg: #36393f;
17-
--content-bg: #36393f;
18-
--content-color: #ffffff;
19-
--nav-bg: #202225;
20-
--nav-text: #cccccc;
21-
--brand-color: #000000;
25+
--body-bg: #36393f;
26+
--content-bg: #36393f;
27+
--link-color: #bbbbbb;
28+
--standard-black: #ffffff;
29+
--content-color: #ffffff;
30+
--nav-bg: #202225;
31+
--nav-text: #cccccc;
32+
--nav-selected: #535353;
33+
--brand-color: #000000;
34+
--page-header: #999999;
35+
--inline-code-color: #FFFFFF;
36+
--inline-code-bg: #535353;
37+
--even-table: #2f3137;
38+
39+
--toggle-thumb: #000000;
40+
--toggle-track: #4d4d4d;
2241
}

‎_sass/_dark-mode.scss‎

Lines changed: 123 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,83 @@
1+
// This page overrides all of the existing colors on the site with
2+
// dynamic CSS variables.
3+
14
@import "colors";
25

3-
:root[data-theme="dark"] {
4-
body {
5-
background-color: var(--body-bg);
6-
}
6+
body {
7+
background-color: var(--body-bg);
8+
}
9+
10+
header.main-nav {
11+
background-color: var(--nav-bg);
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
a {
17+
color: var(--link-color);
18+
}
19+
20+
a:hover {
21+
color: var(--standard-black) !important;
22+
}
23+
24+
.page-header h2 {
25+
color: var(--page-header);
26+
}
727

8-
header {
9-
background-color: var(--nav-bg);
10-
}
28+
h2 {
29+
color: var(--content-color);
30+
}
31+
32+
h3 {
33+
color: var(--content-color);
34+
}
35+
36+
h4 {
37+
color: var(--content-color);
38+
}
39+
40+
#nav-tree .selected {
41+
background-color: var(--nav-selected) !important;
42+
}
43+
44+
#nav-tree .selected a {
45+
color: var(--content-color) !important;
46+
text-shadow: none !important;
47+
font-weight: bold;
48+
}
1149

12-
a {
13-
color: var(--content-color);
14-
}
50+
.arrow {
51+
color: var(--content-color) !important;
52+
}
1553

16-
h2 {
17-
color: var(--content-color);
18-
}
54+
#search-input {
55+
background-color: var(--content-bg);
56+
color: var(--content-color);
57+
}
1958

20-
h3 {
21-
color: var(--content-color);
22-
}
59+
// Inline code snippets, such as on the Contact Us page
60+
pre, code, tt {
61+
background-color: var(--inline-code-bg);
62+
color: var(--inline-code-color);
63+
}
2364

24-
#nav-tree .selected {
25-
background-color: #535353;
26-
}
65+
button {
66+
background-color: transparent !important;
67+
}
2768

28-
#nav-tree .selected a {
29-
color: var(--content-color);
30-
}
69+
tr {
70+
border-bottom: 1px solid #EEE;
3171

32-
.arrow {
33-
color: var(--content-color);
34-
}
72+
&:nth-child(even) {
73+
background: var(--even-table);
74+
}
75+
}
3576

36-
#search-input {
37-
background-color: #535353;
38-
color: var(--content-color);
39-
}
77+
span[id^="mytag"] {
78+
background-color: var(--inline-code-bg) !important;
79+
color: var(--inline-code-color) !important;
80+
padding: 10px;
4081
}
4182

4283
*,
@@ -45,4 +86,57 @@
4586
transition:
4687
color 200ms ease-in-out,
4788
background-color 200ms ease-in-out;
89+
}
90+
91+
.dark-mode-container {
92+
margin-top: auto;
93+
margin-bottom: 20px;
94+
align-self: center;
95+
}
96+
97+
.dark-mode-switch {
98+
position: relative;
99+
display: inline-block;
100+
width: 50px;
101+
height: 28px;
102+
margin-bottom: 20px;
103+
align-self: center;
104+
}
105+
106+
.dark-mode-switch input {
107+
opacity: 0;
108+
width: 0;
109+
height: 0;
110+
}
111+
112+
.dark-mode-switch .slider {
113+
position: absolute;
114+
inset: 0;
115+
cursor: pointer;
116+
background-color: var(--toggle-track);
117+
border-radius: 34px;
118+
transition: background-color 0.3s ease;
119+
}
120+
121+
.dark-mode-switch .slider img {
122+
position: absolute;
123+
left: 3px;
124+
top: 3px;
125+
width: 22px;
126+
height: 22px;
127+
border-radius: 50%;
128+
background-color: var(--toggle-thumb);
129+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
130+
transition: transform 0.3s ease, background-color 0.3s ease;
131+
user-select: none;
132+
-webkit-user-drag: none;
133+
display: none;
134+
}
135+
136+
.dark-mode-switch .slider img[src] {
137+
display: block;
138+
}
139+
140+
.dark-mode-switch input:checked + .slider img {
141+
transform: translateX(22px);
48142
}

‎_sass/_layout.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ body {
1515
nav,
1616
header > form,
1717
header > ul,
18-
div#nav-tree {
18+
div#nav-tree,
19+
.dark-mode-container {
1920
display: block;
2021
}
2122

@@ -229,7 +230,8 @@ header {
229230
nav,
230231
header > form,
231232
header > ul,
232-
div#nav-tree {
233+
div#nav-tree,
234+
.dark-mode-container {
233235
display: none;
234236

235237
@media (min-width: $mobile-break) {

‎_sass/_tables.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,6 @@ table {
33
margin-bottom: 1.75em;
44
}
55

6-
tr {
7-
border-bottom: 1px solid #EEE;
8-
9-
&:nth-child(even) {
10-
background: #fcfcfc;
11-
}
12-
}
13-
146
td, th {
157
padding: 8px;
168
text-align: left;

‎images/RPI_seal_padding.png‎

89.2 KB
Loading

‎images/moon_white.png‎

8.33 KB
Loading

‎images/sun_black.png‎

26.8 KB
Loading

‎scripts/main.js‎

Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,43 +58,32 @@ function toggle_display(id) {
5858
return false;
5959
}
6060

61-
function changeMode() {
61+
// In your main.js (replace the old `const slider = ...` logic with:)
62+
document.addEventListener('DOMContentLoaded', () => {
6263
const toggle = document.getElementById('dark-mode-toggle');
6364
const logo = document.getElementById('site-logo');
64-
let saved = localStorage.getItem('site_mode') || 'light';
65-
66-
if (saved !== 'dark') {
67-
saved = 'dark';
68-
toggle.textContent = 'Toggle Light Mode';
69-
}
70-
else {
71-
saved = 'light';
72-
toggle.textContent = 'Toggle Dark Mode';
73-
}
74-
75-
if (logo) {
76-
logo.src = (saved === 'dark')
77-
? logo.dataset.dark
78-
: logo.dataset.light;
79-
}
80-
81-
localStorage.setItem('site_mode', saved);
82-
document.documentElement.setAttribute('data-theme', saved);
83-
}
84-
85-
window.addEventListener('DOMContentLoaded', () => {
86-
const html = document.documentElement;
87-
const toggle = document.getElementById('dark-mode-toggle');
65+
const icon = document.getElementById('dark-mode-icon');
8866
const saved = localStorage.getItem('site_mode') || 'light';
89-
const logo = document.getElementById('site-logo');
9067

91-
html.setAttribute('data-theme', saved);
92-
toggle.textContent = saved === 'dark' ? 'Light Mode' : 'Dark Mode';
68+
document.documentElement.setAttribute('data-theme', saved);
69+
if (logo) logo.src = saved === 'dark'
70+
? logo.dataset.dark
71+
: logo.dataset.light;
72+
if (icon) icon.src = saved === 'dark'
73+
? icon.dataset.dark
74+
: icon.dataset.light;
75+
toggle.checked = (saved === 'dark');
9376

94-
if (logo) {
95-
logo.src = (saved === 'dark')
77+
toggle.addEventListener('change', () => {
78+
const mode = toggle.checked ? 'dark' : 'light';
79+
localStorage.setItem('site_mode', mode);
80+
document.documentElement.setAttribute('data-theme', mode);
81+
if (logo) logo.src = mode === 'dark'
9682
? logo.dataset.dark
9783
: logo.dataset.light;
98-
}
84+
if (icon) icon.src = mode === 'dark'
85+
? icon.dataset.dark
86+
: icon.dataset.light;
87+
});
9988
});
10089

0 commit comments

Comments
 (0)