Skip to content

Commit 976130b

Browse files
SijieFuSijieFu
committed
allow theme change on client side; a theme toggle button is added to the navbar
1 parent 173be24 commit 976130b

File tree

8 files changed

+70
-29
lines changed

8 files changed

+70
-29
lines changed

‎_includes/masthead.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,18 @@
66
<nav id="site-nav" class="greedy-nav">
77
<button><div class="navicon"></div></button>
88
<ul class="visible-links">
9-
<li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
9+
<li class="masthead__menu-item masthead__menu-item--lg persist"><a href="{{ base_path }}/">{{ site.title }}</a></li>
1010
{% for link in site.data.navigation.main %}
1111
{% if link.url contains 'http' %}
1212
{% assign domain = '' %}
13-
{% else %}
13+
{% else %}
1414
{% assign domain = base_path %}
1515
{% endif %}
1616
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
1717
{% endfor %}
18+
<li id="theme-toggle" class="masthead__menu-item persist tail">
19+
<a><i id="theme-icon" class="fa-solid fa-sun" aria-hidden="true" title="toggle theme"></i></a>
20+
</li>
1821
</ul>
1922
<ul class="hidden-links hidden"></ul>
2023
</nav>

‎_layouts/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% include base_path %}
66

77
<!doctype html>
8-
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
8+
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js"{% if site.site_theme == "dark" %} data-theme="dark"{% endif %}>
99
<head>
1010
{% include head.html %}
1111
{% include head/custom.html %}

‎_sass/layout/_navigation.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,15 @@
225225
}
226226
}
227227

228+
#theme-toggle {
229+
a {
230+
width: 25px;
231+
display: flex;
232+
justify-content: center;
233+
cursor: pointer;
234+
}
235+
}
236+
228237
a {
229238
position: relative;
230239

‎_sass/theme/_dark.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ $sidebar-link-max-width : 250px;
3434
$sidebar-screen-min-width : 1024px;
3535

3636
/* Dark theme for the site */
37-
:root {
37+
html[data-theme="dark"] {
3838
--global-base-color : #{$background};
3939
--global-bg-color : #{$background};
4040
--global-border-color : #{$background-light};
@@ -43,9 +43,9 @@ $sidebar-screen-min-width : 1024px;
4343
--global-fig-caption-color : #{$dark-gray};
4444
--global-link-color : #{$link};
4545
--global-link-color-hover : #{$link-dark};
46-
--global-link-color-visited : #{$link-light};
46+
--global-link-color-visited : #{$link-light};
4747
--global-masthead-link-color : #{$text};
48-
--global-masthead-link-color-hover : #{$background-light};
48+
--global-masthead-link-color-hover : #{$background-light};
4949
--global-text-color : #{$text};
5050
--global-text-color-light : #{$light-gray};
5151
--global-thead-color : #{$background-lighter};

‎assets/css/main.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@
88
sorted by the dependencies. Also, the first two lines of the file are required by Jekyll.
99
*/
1010

11-
@import
11+
@import
1212
"vendor/breakpoint/breakpoint",
1313

1414
"themes",
15-
"theme/{{ site.site_theme | default: 'default' }}",
15+
"theme/default",
16+
"theme/dark",
1617

1718
"include/mixins",
1819
"vendor/susy/susy",
@@ -34,7 +35,7 @@
3435
"layout/page",
3536
"layout/archive",
3637
"layout/sidebar",
37-
38+
3839
"vendor/font-awesome/fontawesome",
3940
"vendor/font-awesome/solid",
4041
"vendor/font-awesome/brands",

‎assets/js/_main.js

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,70 @@
22
jQuery plugin settings and other scripts
33
========================================================================== */
44

5-
$(document).ready(function(){
5+
$(document).ready(function () {
6+
// Set the theme on page load
7+
var setTheme = function (theme) {
8+
const use_theme = theme || localStorage.getItem("theme") || $("html").attr("data-theme");
9+
if (use_theme === "dark") {
10+
$("html").attr("data-theme", "dark");
11+
$("#theme-icon").removeClass("fa-sun").addClass("fa-moon");
12+
} else if (use_theme === "light") {
13+
$("html").removeAttr("data-theme");
14+
$("#theme-icon").removeClass("fa-moon").addClass("fa-sun");
15+
}
16+
}
17+
setTheme();
18+
19+
// Toggle the theme
20+
var toggleTheme = function () {
21+
const current_theme = $("html").attr("data-theme");
22+
const new_theme = current_theme === "dark" ? "light" : "dark";
23+
localStorage.setItem("theme", new_theme);
24+
setTheme(new_theme);
25+
}
26+
$('#theme-toggle').on('click', function () {
27+
toggleTheme();
28+
});
29+
630
// These should be the same as the settings in _variables.scss
7-
scssLarge = 925; // pixels
31+
const scssLarge = 925; // pixels
832

933
// Sticky footer
10-
var bumpIt = function() {
11-
$("body").css("margin-bottom", $(".page__footer").outerHeight(true));
12-
},
34+
var bumpIt = function () {
35+
$("body").css("margin-bottom", $(".page__footer").outerHeight(true));
36+
},
1337
didResize = false;
1438

1539
bumpIt();
1640

17-
$(window).resize(function() {
41+
$(window).resize(function () {
1842
didResize = true;
1943
});
20-
setInterval(function() {
44+
setInterval(function () {
2145
if (didResize) {
2246
didResize = false;
2347
bumpIt();
2448
}
2549
}, 250);
26-
50+
2751
// FitVids init
2852
fitvids();
2953

3054
// Follow menu drop down
31-
$(".author__urls-wrapper button").on("click", function() {
32-
$(".author__urls").fadeToggle("fast", function() {});
55+
$(".author__urls-wrapper button").on("click", function () {
56+
$(".author__urls").fadeToggle("fast", function () { });
3357
$(".author__urls-wrapper button").toggleClass("open");
3458
});
3559

3660
// Restore the follow menu if toggled on a window resize
37-
jQuery(window).on('resize', function() {
61+
jQuery(window).on('resize', function () {
3862
if ($('.author__urls.social-icons').css('display') == 'none' && $(window).width() >= scssLarge) {
3963
$(".author__urls").css('display', 'block')
4064
}
41-
});
65+
});
4266

4367
// init smooth scroll, this needs to be slightly more than then fixed masthead height
44-
$("a").smoothScroll({offset: -65});
68+
$("a").smoothScroll({ offset: -65 });
4569

4670
// add lightbox class to all image links
4771
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
@@ -53,7 +77,7 @@ $(document).ready(function(){
5377
gallery: {
5478
enabled: true,
5579
navigateByImgClick: true,
56-
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
80+
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
5781
},
5882
image: {
5983
tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
@@ -63,7 +87,7 @@ $(document).ready(function(){
6387
// make it unique to apply your CSS animations just to this exact popup
6488
mainClass: 'mfp-zoom-in',
6589
callbacks: {
66-
beforeOpen: function() {
90+
beforeOpen: function () {
6791
// just a hack that adds mfp-anim class to markup
6892
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
6993
}

‎assets/js/main.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/plugins/jquery.greedy-navigation.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
var $nav = $('#site-nav');
99
var $btn = $('#site-nav button');
1010
var $vlinks = $('#site-nav .visible-links');
11+
var $vlinks_persist_tail = $vlinks.children("*.persist.tail");
1112
var $hlinks = $('#site-nav .hidden-links');
1213

1314
var breaks = [];
@@ -19,13 +20,12 @@ function updateNav() {
1920
// The visible list is overflowing the nav
2021
if ($vlinks.width() > availableSpace) {
2122

22-
while ($vlinks.width() > availableSpace && $vlinks.children('*:not(.masthead__menu-item--lg)').length > 0) {
23-
23+
while ($vlinks.width() > availableSpace && $vlinks.children("*:not(.persist)").length > 0) {
2424
// Record the width of the list
2525
breaks.push($vlinks.width());
2626

2727
// Move item to the hidden list
28-
$vlinks.children('*:not(.masthead__menu-item--lg)').last().prependTo($hlinks);
28+
$vlinks.children("*:not(.persist)").last().prependTo($hlinks);
2929

3030
availableSpace = $btn.hasClass("hidden") ? $nav.width() : $nav.width() - $btn.width() - 30;
3131

@@ -39,7 +39,11 @@ function updateNav() {
3939
// There is space for another item in the nav
4040
while (breaks.length > 0 && availableSpace > breaks[breaks.length - 1]) {
4141
// Move the item to the visible list
42-
$hlinks.children().first().appendTo($vlinks);
42+
if ($vlinks_persist_tail.children().length > 0) {
43+
$hlinks.children().first().insertBefore($vlinks_persist_tail);
44+
} else {
45+
$hlinks.children().first().appendTo($vlinks);
46+
}
4347
breaks.pop();
4448
}
4549

0 commit comments

Comments
 (0)