Skip to content

Commit e30a46b

Browse files
author
JD
authored
Issue 105 : Dark Mode + Theming alshedivat#118 (alshedivat#119)
* Dark Mode + Theming * Themes scss file created with default color scheme and dark color scheme. * Logic for managing dark mode toggle added. * Modified existing scss/html to work with theme toggling. * Fixed hover issues * Added enable_darkmode to configs. * Added the requested option of disabling/enabling dark mode via config files.
1 parent c085a63 commit e30a46b

File tree

11 files changed

+170
-38
lines changed

11 files changed

+170
-38
lines changed

‎_config.yml

+1
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ enable_google_analytics: false
151151
enable_mansory: true
152152
enable_math: true
153153
enable_tooltips: false
154+
enable_darkmode: false
154155
show_social_icons: false
155156

156157
# -----------------------------------------------------------------------------

‎_includes/head.html

+5
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,8 @@
3232
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
3333

3434
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
35+
36+
<!-- Theming-->
37+
{% if site.enable_darkmode %}
38+
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
39+
{% endif %}

‎_includes/header.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<header>
22

33
<!-- Nav Bar -->
4-
<nav id="navbar" class="navbar navbar-light bg-white navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
4+
<nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
55
<div class="container">
66
{% if page.title != "about" %}
77
<a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
@@ -56,6 +56,14 @@
5656
</li>
5757
{% endif %}
5858
{% endfor %}
59+
{% if site.enable_darkmode %}
60+
<div class = "toggle-container">
61+
<a id = "light-toggle">
62+
<i class="fas fa-moon"></i>
63+
<i class="fas fa-sun"></i>
64+
</a>
65+
</div>
66+
{% endif %}
5967
</ul>
6068
</div>
6169
</div>

‎_includes/scripts/misc.html

+3
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,6 @@
1919

2020
<!-- Load Common JS -->
2121
<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
22+
23+
<!-- Load DarkMode JS -->
24+
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>

‎_sass/_base.scss

+50-31
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
// Typography
66

77
a, table.table a {
8-
color: $theme-color;
8+
color: var(--global-theme-color);
99
&:hover {
10-
color: $theme-color;
10+
color: var(--global-theme-color);
1111
text-decoration: underline;
1212
}
1313
&:hover:after {
@@ -65,7 +65,7 @@ a, table.table a {
6565
color: inherit;
6666
font-size: 0.875rem;
6767
&:hover {
68-
color: $theme-color;
68+
color: var(--global-theme-color);
6969
text-decoration: none;
7070
}
7171
}
@@ -78,6 +78,7 @@ a, table.table a {
7878
box-shadow: none;
7979
border-bottom: 1px solid $grey-color-light;
8080
opacity: 0.95;
81+
background-color: var(--global-bg-color);
8182
}
8283
.navbar.navbar-light {
8384
// Remove link decoration
@@ -86,25 +87,27 @@ a, table.table a {
8687
text-decoration: none;
8788
}
8889
}
90+
.navbar-brand {
91+
color: var(--global-text-color);
92+
}
8993
.navbar-nav .nav-item .nav-link {
9094
&:hover {
91-
color: $theme-color;
95+
color: var(--global-hover-color);
9296
}
9397
}
9498
.navbar-nav .nav-item.active>.nav-link {
9599
background-color: inherit;
96-
color: $theme-color;
97100
font-weight: bolder;
101+
color: var(--global-theme-color);
98102
&:hover {
99-
color: $theme-color;
103+
color: var(--global-hover-color);
100104
}
101105
}
102106
.contact-icon {
103107
font-size: 2rem;
104108
a {
105-
color: $grey-color-dark;
106109
&:hover {
107-
color: $theme-color;
110+
color: var(--global-hover-color);
108111
}
109112
}
110113
}
@@ -150,8 +153,12 @@ a, table.table a {
150153

151154
.news table td {
152155
font-size: 1rem;
156+
color: var(--global-text-color);
153157
}
154158

159+
.news table th {
160+
color: var(--global-text-color);
161+
}
155162

156163
// Social (bottom)
157164

@@ -160,9 +167,9 @@ a, table.table a {
160167
.contact-icon {
161168
font-size: 4rem;
162169
a {
163-
color: $grey-color-dark;
170+
color: var(--global-icon-color);
164171
&:hover {
165-
color: $theme-color;
172+
color: var(--global-theme-color);
166173
}
167174
}
168175
}
@@ -173,19 +180,18 @@ a, table.table a {
173180

174181

175182
// Footer
176-
177183
footer.fixed-bottom {
178-
color: lighten($grey-color, 25%);
179-
background-color: $grey-color-dark;
184+
color: var(--global-footer-text-color);
185+
background-color: var(--global-footer-bg-color);
180186
font-size: 0.75rem;
181187
.container {
182188
padding-top: 9px;
183189
padding-bottom: 8px;
184190
}
185191
a {
186-
color: white;
192+
color: var(--global-footer-link-color);
187193
&:hover {
188-
color: lighten($theme-color, 25%);
194+
color: pink;
189195
text-decoration: none;
190196
}
191197
}
@@ -207,7 +213,7 @@ footer.sticky-bottom {
207213
padding-top: 2rem;
208214
padding-bottom: 5rem;
209215
h1 {
210-
color: $theme-color;
216+
color: var(--global-theme-color);
211217
font-size: 5rem;
212218
}
213219
}
@@ -227,19 +233,19 @@ footer.sticky-bottom {
227233
margin-bottom: 0;
228234
}
229235
a {
230-
color: black;
236+
color: var(--global-text-color);
231237
text-decoration: none;
232238
&:hover {
233-
color: $theme-color;
239+
color: var(--global-theme-color);
234240
}
235241
}
236242
}
237243
}
238244

239245
.pagination .page-item.active .page-link {
240-
background-color: $theme-color;
246+
background-color: var(--global-theme-color);
241247
&:hover {
242-
background-color: $theme-color;
248+
background-color: var(--global-theme-color);
243249
}
244250
}
245251

@@ -248,7 +254,7 @@ footer.sticky-bottom {
248254

249255
.distill {
250256
a:hover {
251-
border-bottom-color: $theme-color;
257+
border-bottom-color: var(--global-theme-color);
252258
text-decoration: none;
253259
}
254260
}
@@ -264,7 +270,7 @@ footer.sticky-bottom {
264270
color: black;
265271
text-decoration: none;
266272
&:hover {
267-
color: $theme-color;
273+
color: var(--global-theme-color);
268274
}
269275
}
270276
}
@@ -279,7 +285,7 @@ footer.sticky-bottom {
279285
.publications {
280286
margin-top: 2rem;
281287
h1 {
282-
color: $theme-color;
288+
color: var(--global-theme-color);
283289
font-size: 2rem;
284290
text-align: center;
285291
margin-top: 1em;
@@ -311,7 +317,7 @@ footer.sticky-bottom {
311317
margin-bottom: 0.5rem;
312318
abbr {
313319
display: inline-block;
314-
background-color: $theme-color;
320+
background-color: var(--global-theme-color);
315321
padding-left: 1rem;
316322
padding-right: 1rem;
317323
a {
@@ -322,16 +328,16 @@ footer.sticky-bottom {
322328
}
323329
}
324330
.award {
325-
color: $theme-color !important;
326-
border: 1px solid $theme-color;
331+
color: var(--global-theme-color) !important;
332+
border: 1px solid var(--global-theme-color);
327333
}
328334
}
329335
.title {
330336
font-weight: bolder;
331337
}
332338
.author {
333339
a {
334-
border-bottom: 1px dashed $theme-color;
340+
border-bottom: 1px dashed var(--global-theme-color);
335341
&:hover {
336342
border-bottom-style: solid;
337343
text-decoration: none;
@@ -344,15 +350,15 @@ footer.sticky-bottom {
344350
}
345351
.links {
346352
a.btn {
347-
color: $text-color;
348-
border: 1px solid $text-color;
353+
color: var(--global-text-color);
354+
border: 1px solid var(--global-text-color);
349355
padding-left: 1rem;
350356
padding-right: 1rem;
351357
padding-top: 0.25rem;
352358
padding-bottom: 0.25rem;
353359
&:hover {
354-
color: $theme-color;
355-
border-color: $theme-color;
360+
color: var(--global-theme-color);
361+
border-color: var(--global-theme-color);
356362
}
357363
}
358364
}
@@ -394,3 +400,16 @@ footer.sticky-bottom {
394400
}
395401
}
396402
}
403+
404+
// Rouge Color Customization
405+
code {
406+
color: var(--global-theme-color);
407+
}
408+
// Transitioning Themes
409+
html.transition,
410+
html.transition *,
411+
html.transition *:before,
412+
html.transition *:after {
413+
transition: all 750ms !important;
414+
transition-delay: 0 !important;
415+
}

‎_sass/_layout.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
body {
66
padding-bottom: 70px;
7-
color: $text-color;
7+
color: var(--global-text-color);
8+
background-color: var(--global-bg-color);
89
}
910

1011
body.fixed-top-nav {

‎_sass/_themes.scss

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*******************************************************************************
2+
* Themes
3+
******************************************************************************/
4+
5+
:root {
6+
--global-bg-color: #{$white-color};
7+
--global-text-color: #{$black-color};
8+
--global-theme-color: #{$purple-color};
9+
--global-hover-color: #{$light-purple-color};
10+
--global-footer-bg-color: #{$grey-color-dark};
11+
--global-footer-text-color: #{$grey-color-light};
12+
--global-footer-link-color: #{$white-color};
13+
--global-icon-color: #{$grey-color-dark};
14+
15+
.fa-sun {
16+
display : none;
17+
}
18+
.fa-moon {
19+
padding-left: 10px;
20+
padding-top: 12px;
21+
display : block;
22+
}
23+
}
24+
25+
html[data-theme='dark'] {
26+
--global-bg-color: #{$grey-color-dark};
27+
--global-text-color: #{$grey-color-light};
28+
--global-theme-color: #{$cyan-color};
29+
--global-hover-color: #{$light-cyan-color};
30+
--global-footer-bg-color: #{$grey-color-light};
31+
--global-footer-text-color: #{$grey-color-dark};
32+
--global-footer-link-color: #{$black-color};
33+
--global-icon-color: navajowhite;
34+
35+
.fa-sun {
36+
padding-left: 10px;
37+
padding-top: 12px;
38+
display : block;
39+
}
40+
.fa-moon {
41+
display : none;
42+
}
43+
}

‎_sass/_variables.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ $orange-color: #F29105 !default;
1414
$blue-color: #0076df !default;
1515
$blue-color-dark: #00369f !default;
1616
$cyan-color: #2698BA !default;
17+
$light-cyan-color: lighten($cyan-color, 25%);
1718
$green-color: #00ab37 !default;
1819
$green-color-lime: #B7D12A !default;
1920
$green-color-dark: #009f06 !default;
2021
$green-color-light: #ddffdd !default;
2122
$green-color-bright: #11D68B !default;
2223
$purple-color: #B509AC !default;
24+
$light-purple-color: lighten($purple-color, 25%);
2325
$pink-color: #f92080 !default;
2426
$pink-color-light: #ffdddd !default;
2527
$yellow-color: #efcc00 !default;
@@ -28,8 +30,5 @@ $grey-color: #828282 !default;
2830
$grey-color-light: lighten($grey-color, 40%);
2931
$grey-color-dark: darken($grey-color, 25%);
3032

31-
/* Set theme colors *************************/
32-
$theme-color: $purple-color;
33-
34-
$link-color: $theme-color;
35-
$text-color: #111 !default;
33+
$white-color: #ffffff !default;
34+
$black-color: #000000 !default;

‎assets/css/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
@import
77
"variables",
8+
"themes",
89
"layout",
910
"base"
1011
;

0 commit comments

Comments
 (0)