Skip to content

Commit d86b684

Browse files
JManion32JManion32
committed
Implemented Dark Mode
Still very rough around the edges but dark mode is officially toggleable
1 parent ca387ac commit d86b684

File tree

6 files changed

+86
-29
lines changed

6 files changed

+86
-29
lines changed

‎Gemfile.lock‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ GEM
4040
faraday-net_http (3.1.1)
4141
net-http
4242
ffi (1.17.0-arm64-darwin)
43+
ffi (1.17.0-x64-mingw-ucrt)
4344
ffi (1.17.0-x86_64-linux-gnu)
4445
forwardable-extended (2.6.0)
4546
gemoji (4.1.0)
@@ -240,6 +241,8 @@ GEM
240241
uri
241242
nokogiri (1.16.7-arm64-darwin)
242243
racc (~> 1.4)
244+
nokogiri (1.16.7-x64-mingw-ucrt)
245+
racc (~> 1.4)
243246
nokogiri (1.16.7-x86_64-linux)
244247
racc (~> 1.4)
245248
octokit (4.25.1)
@@ -277,18 +280,21 @@ GEM
277280
concurrent-ruby (~> 1.0)
278281
unicode-display_width (1.8.0)
279282
uri (0.13.0)
283+
wdm (0.2.0)
280284
webrick (1.9.1)
281285
yell (2.2.2)
282286

283287
PLATFORMS
284288
arm64-darwin-22
285289
arm64-darwin-23
290+
x64-mingw-ucrt
286291
x86_64-linux
287292

288293
DEPENDENCIES
289294
github-pages (= 232)
290295
html-proofer (~> 3.19.4)
291296
json
297+
wdm (>= 0.1.1)
292298
webrick (~> 1.9)
293299

294300
BUNDLED WITH

‎_layouts/default.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<meta name="generator" content="Jekyll v{{ jekyll.version }}">
88

9+
<script>
10+
(function(){
11+
// grab or default to 'light'
12+
const m = localStorage.getItem('site_mode') || 'light';
13+
document.documentElement.setAttribute('data-theme', m);
14+
})();
15+
</script>
16+
917
<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">
1018
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
19+
<link rel="stylesheet" href="css/main.css">
1120
<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
1221
<link rel="shortcut icon" href="https://submitty.cs.rpi.edu/img/favicon.ico" type="image/x-icon" />
1322
<link rel="icon" type="image/png" href="{{ site.baseurl }}/touch-icon.png" sizes="192x192">
@@ -43,6 +52,7 @@
4352

4453
<body>
4554
<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>
4656
<header class='main-nav'>
4757
<h1>
4858
<button type="button" class="open-nav" id="open-nav">

‎_sass/_colors.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// _sass/_colors.scss
2+
3+
// Light theme tokens
4+
:root {
5+
--body-bg: #ffffff;
6+
--content-bg: #ffffff;
7+
--content-color: #222222;
8+
--nav-bg: #f6fbfe;
9+
--nav-text: #666666;
10+
--brand-color: #f6fbfe;
11+
/* …add any others you need… */
12+
}
13+
14+
// Dark theme overrides
15+
:root[data-theme="dark"] {
16+
--body-bg: #121212;
17+
--content-bg: #1e1e1e;
18+
--content-color: #eeeeee;
19+
--nav-bg: #191919;
20+
--nav-text: #cccccc;
21+
--brand-color: #000000;
22+
}

‎_sass/_layout.scss‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "colors";
2+
13
input::-ms-clear,
24
input::-ms-reveal {
35
display: none !important;
@@ -6,7 +8,7 @@ input::-ms-reveal {
68
body {
79
height: auto;
810
overflow-x: hidden;
9-
background-color: $body-background-color;
11+
background-color: var(--body-bg);
1012

1113
&.nav-open {
1214
overflow: hidden;
@@ -25,7 +27,7 @@ body {
2527

2628
&::before {
2729
content: "";
28-
background-color: $content-background-color;
30+
background-color: var(--body-bg);
2931
position: fixed;
3032
top: 0;
3133
right: 0;
@@ -53,7 +55,7 @@ body {
5355
&::after {
5456
left: 0;
5557
width: $nav-width;
56-
background-color: $nav-background-color;
58+
background-color: var(--nav-bg);
5759
}
5860

5961
#search-input,
@@ -64,7 +66,7 @@ body {
6466
&::before {
6567
left: $nav-width;
6668
right: 0;
67-
background-color: $content-background-color;
69+
background-color: var(--content-bg);
6870
}
6971
}
7072
}
@@ -98,7 +100,7 @@ header {
98100
right: 0;
99101
overflow-x: hidden;
100102
z-index: 1;
101-
background-color: $nav-background-color;
103+
background-color: var(--nav-bg);
102104

103105
ul {
104106
list-style-type: none;
@@ -110,8 +112,8 @@ header {
110112
padding: $emblem-vertical-padding $emblem-horizontal-padding;
111113
//height: $nav-header-height;
112114
box-sizing: border-box;
113-
background-color: $brand-colour;
114-
color: #FFF;
115+
background-color: var(--brand-color);
116+
color: var(--content-color);
115117
margin: 0;
116118
font-size: 1.7rem;
117119
line-height: 0.8;
@@ -141,7 +143,7 @@ header {
141143
}
142144

143145
.open-nav {
144-
background-color: transparent;
146+
background-color: transparent;
145147
background-size: 100%;
146148
width: $emblem-size;
147149
height: $emblem-size;
@@ -179,8 +181,8 @@ header {
179181

180182
.content {
181183
position: relative;
182-
background-color: $content-background-color;
183-
color: $content-color;
184+
background-color: var(--content-bg);
185+
color: var(--content-color);
184186

185187
h3::before {
186188
content: "";
@@ -350,8 +352,8 @@ h3 + .warning {
350352

351353

352354
h4 code {
353-
background: $nav-background-color;
354-
color: $content-color;
355+
background: var(--nav-bg);
356+
color: var(--content-color);
355357
background-color: transparent;
356358
font-weight: 700;
357359
padding: 0;
@@ -378,7 +380,7 @@ h4 svg {
378380
position: absolute;
379381
top: 5px;
380382
line-height: 1;
381-
color: $brand-colour;
383+
color: var(--brand-color);
382384
padding-left: 5px;
383385
}
384386

@@ -418,7 +420,7 @@ h4 svg {
418420

419421
&:focus {
420422
outline: none;
421-
border-left-color: $brand-colour;
423+
border-left-color: var(--brand-color);
422424
}
423425
}
424426

@@ -446,7 +448,7 @@ h4 svg {
446448
font-weight: bold;
447449

448450
&.major {
449-
background: $brand-colour;
451+
background: var(--brand-color);
450452
color: #fff;
451453
}
452454
}
@@ -456,8 +458,8 @@ blockquote {
456458
padding: 10px 15px;
457459
margin-left: -15px;
458460
margin-right: -10px;
459-
background-color: $brand-colour-light;
460-
border-color: $brand-colour;
461+
background-color: var(--brand-color);
462+
border-color: var(--brand-color);
461463

462464
p:last-child {
463465
margin-bottom: 0;

‎css/main.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,6 @@ sitemap: false
77
$body-background-color: #FFFFFF;
88

99
$content-max-width: 800px;
10-
$content-color: #222;
11-
$content-background-color: #fff;
12-
13-
//$brand-colour: #3583d6;
14-
//$brand-colour: #ADD5FF;
15-
$brand-colour: #f6fbfe;
16-
$brand-colour-light: mix($brand-colour, $content-background-color, 10%);
17-
18-
$nav-header-background-color: $brand-colour;
19-
//$nav-header-height: 60px;
20-
//$nav-background-color: #f5f5f5;
21-
$nav-background-color: $brand-colour;
2210
$nav-width: 300px;
2311

2412
$space: 20px;

‎scripts/main.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,32 @@ function toggle_display(id) {
5757
}
5858
return false;
5959
}
60+
61+
function changeMode() {
62+
const toggle = document.getElementById('dark-mode-toggle');
63+
let saved = localStorage.getItem('site_mode') || 'light';
64+
65+
if (saved !== 'dark') {
66+
saved = 'dark';
67+
toggle.innerHTML = 'Toggle Light Mode';
68+
console.log('Setting dark mode');
69+
}
70+
else {
71+
saved = 'light';
72+
toggle.innerHTML = 'Toggle Dark Mode';
73+
console.log('Setting light mode');
74+
}
75+
76+
localStorage.setItem('site_mode', saved);
77+
document.documentElement.setAttribute('data-theme', saved);
78+
}
79+
80+
window.addEventListener('DOMContentLoaded', () => {
81+
const html = document.documentElement;
82+
const toggle = document.getElementById('dark-mode-toggle');
83+
const saved = localStorage.getItem('site_mode') || 'light';
84+
85+
html.setAttribute('data-theme', saved);
86+
toggle.textContent = saved === 'dark' ? 'Light Mode' : 'Dark Mode';
87+
});
88+

0 commit comments

Comments
 (0)