Skip to content

Allow dark/light theme switch on user browser #2900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 16, 2025
Merged

Allow dark/light theme switch on user browser #2900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
173be24
deprecate $masthead-height variable, use automatic padding instead in…
SijieFu Mar 12, 2025
976130b
allow theme change on client side; a theme toggle button is added to …
SijieFu Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions _includes/masthead.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@
<nav id="site-nav" class="greedy-nav">
<button><div class="navicon"></div></button>
<ul class="visible-links">
<li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
<li class="masthead__menu-item masthead__menu-item--lg persist"><a href="{{ base_path }}/">{{ site.title }}</a></li>
{% for link in site.data.navigation.main %}
{% if link.url contains 'http' %}
{% assign domain = '' %}
{% else %}
{% else %}
{% assign domain = base_path %}
{% endif %}
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<li id="theme-toggle" class="masthead__menu-item persist tail">
<a><i id="theme-icon" class="fa-solid fa-sun" aria-hidden="true" title="toggle theme"></i></a>
</li>
</ul>
<ul class="hidden-links hidden"></ul>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% include base_path %}

<!doctype html>
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js"{% if site.site_theme == "dark" %} data-theme="dark"{% endif %}>
<head>
{% include head.html %}
{% include head/custom.html %}
Expand Down
14 changes: 11 additions & 3 deletions _sass/layout/_masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
.masthead {
position: fixed;
background: var(--global-bg-color);
border-bottom: 1px solid var(--global-border-color);
height: $masthead-height;
height: fit-content;
top: 0;
width: 100%;

Expand All @@ -16,10 +15,19 @@
animation-delay: 0.15s;
z-index: 20;

&::after {
content: "";
position: absolute;
bottom: 0;
height: 1px;
background: var(--global-border-color);
width: 100%;
}

&__inner-wrap {
@include container;
@include clearfix;
padding: 1em 1em 1em;
padding: 0.5em 1em;
font-family: $sans-serif-narrow;

@include breakpoint($x-large) {
Expand Down
9 changes: 9 additions & 0 deletions _sass/layout/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,15 @@
}
}

#theme-toggle {
a {
width: 25px;
display: flex;
justify-content: center;
cursor: pointer;
}
}

a {
position: relative;

Expand Down
4 changes: 2 additions & 2 deletions _sass/layout/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@

@include clearfix();
margin-bottom: 1em;

@media (orientation: portrait) {
margin-top: 5em;
margin-top: 1em;
}

@media screen and (min-width: $sidebar-screen-min-width) {
Expand Down
6 changes: 3 additions & 3 deletions _sass/theme/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $sidebar-link-max-width : 250px;
$sidebar-screen-min-width : 1024px;

/* Dark theme for the site */
:root {
html[data-theme="dark"] {
--global-base-color : #{$background};
--global-bg-color : #{$background};
--global-border-color : #{$background-light};
Expand All @@ -43,9 +43,9 @@ $sidebar-screen-min-width : 1024px;
--global-fig-caption-color : #{$dark-gray};
--global-link-color : #{$link};
--global-link-color-hover : #{$link-dark};
--global-link-color-visited : #{$link-light};
--global-link-color-visited : #{$link-light};
--global-masthead-link-color : #{$text};
--global-masthead-link-color-hover : #{$background-light};
--global-masthead-link-color-hover : #{$background-light};
--global-text-color : #{$text};
--global-text-color-light : #{$light-gray};
--global-thead-color : #{$background-lighter};
Expand Down
7 changes: 4 additions & 3 deletions assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@
sorted by the dependencies. Also, the first two lines of the file are required by Jekyll.
*/

@import
@import
"vendor/breakpoint/breakpoint",

"themes",
"theme/{{ site.site_theme | default: 'default' }}",
"theme/default",
"theme/dark",

"include/mixins",
"vendor/susy/susy",
Expand All @@ -34,7 +35,7 @@
"layout/page",
"layout/archive",
"layout/sidebar",

"vendor/font-awesome/fontawesome",
"vendor/font-awesome/solid",
"vendor/font-awesome/brands",
Expand Down
54 changes: 39 additions & 15 deletions assets/js/_main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,70 @@
jQuery plugin settings and other scripts
========================================================================== */

$(document).ready(function(){
$(document).ready(function () {
// Set the theme on page load
var setTheme = function (theme) {
const use_theme = theme || localStorage.getItem("theme") || $("html").attr("data-theme");
if (use_theme === "dark") {
$("html").attr("data-theme", "dark");
$("#theme-icon").removeClass("fa-sun").addClass("fa-moon");
} else if (use_theme === "light") {
$("html").removeAttr("data-theme");
$("#theme-icon").removeClass("fa-moon").addClass("fa-sun");
}
}
setTheme();

// Toggle the theme
var toggleTheme = function () {
const current_theme = $("html").attr("data-theme");
const new_theme = current_theme === "dark" ? "light" : "dark";
localStorage.setItem("theme", new_theme);
setTheme(new_theme);
}
$('#theme-toggle').on('click', function () {
toggleTheme();
});

// These should be the same as the settings in _variables.scss
scssLarge = 925; // pixels
const scssLarge = 925; // pixels

// Sticky footer
var bumpIt = function() {
$("body").css("margin-bottom", $(".page__footer").outerHeight(true));
},
var bumpIt = function () {
$("body").css("margin-bottom", $(".page__footer").outerHeight(true));
},
didResize = false;

bumpIt();

$(window).resize(function() {
$(window).resize(function () {
didResize = true;
});
setInterval(function() {
setInterval(function () {
if (didResize) {
didResize = false;
bumpIt();
}
}, 250);

// FitVids init
fitvids();

// Follow menu drop down
$(".author__urls-wrapper button").on("click", function() {
$(".author__urls").fadeToggle("fast", function() {});
$(".author__urls-wrapper button").on("click", function () {
$(".author__urls").fadeToggle("fast", function () { });
$(".author__urls-wrapper button").toggleClass("open");
});

// Restore the follow menu if toggled on a window resize
jQuery(window).on('resize', function() {
jQuery(window).on('resize', function () {
if ($('.author__urls.social-icons').css('display') == 'none' && $(window).width() >= scssLarge) {
$(".author__urls").css('display', 'block')
}
});
});

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

// add lightbox class to all image links
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
Expand All @@ -53,7 +77,7 @@ $(document).ready(function(){
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
Expand All @@ -63,7 +87,7 @@ $(document).ready(function(){
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-zoom-in',
callbacks: {
beforeOpen: function() {
beforeOpen: function () {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
}
Expand Down
2 changes: 1 addition & 1 deletion assets/js/main.min.js
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 26 additions & 15 deletions assets/js/plugins/jquery.greedy-navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
var $nav = $('#site-nav');
var $btn = $('#site-nav button');
var $vlinks = $('#site-nav .visible-links');
var $vlinks_persist_tail = $vlinks.children("*.persist.tail");
var $hlinks = $('#site-nav .hidden-links');

var breaks = [];
Expand All @@ -17,36 +18,37 @@ function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;

// The visible list is overflowing the nav
if($vlinks.width() > availableSpace) {

while ($vlinks.width() > availableSpace && $vlinks.children('*:not(.masthead__menu-item--lg)').length > 0) {
if ($vlinks.width() > availableSpace) {

while ($vlinks.width() > availableSpace && $vlinks.children("*:not(.persist)").length > 0) {
// Record the width of the list
breaks.push($vlinks.width());

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

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

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

// Show the dropdown btn
if($btn.hasClass('hidden')) {
$btn.removeClass('hidden');
}
$btn.removeClass("hidden");
}

// The visible list is not overflowing
} else {

// There is space for another item in the nav
while(breaks.length > 0 && availableSpace > breaks[breaks.length-1]) {
while (breaks.length > 0 && availableSpace > breaks[breaks.length - 1]) {
// Move the item to the visible list
$hlinks.children().first().appendTo($vlinks);
if ($vlinks_persist_tail.children().length > 0) {
$hlinks.children().first().insertBefore($vlinks_persist_tail);
} else {
$hlinks.children().first().appendTo($vlinks);
}
breaks.pop();
}

// Hide the dropdown btn if hidden list is empty
if(breaks.length < 1) {
if (breaks.length < 1) {
$btn.addClass('hidden');
$btn.removeClass('close');
$hlinks.addClass('hidden');
Expand All @@ -56,18 +58,27 @@ function updateNav() {
// Keep counter updated
$btn.attr("count", breaks.length);

// update masthead height and the body/sidebar top padding
var mastheadHeight = $('.masthead').height();
$('body').css('padding-top', mastheadHeight + 'px');
if ($(".author__urls-wrapper button").is(":visible")) {
$(".sidebar").css("padding-top", "");
} else {
$(".sidebar").css("padding-top", mastheadHeight + "px");
}

}

// Window listeners

$(window).on('resize', function() {
$(window).on('resize', function () {
updateNav();
});
screen.orientation.addEventListener("change", function(){
screen.orientation.addEventListener("change", function () {
updateNav();
});

$btn.on('click', function() {
$btn.on('click', function () {
$hlinks.toggleClass('hidden');
$(this).toggleClass('close');
});
Expand Down