Skip to content

feat: simplify theme toggle to light/dark with current-view icon #83

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
jmeridth merged 1 commit into from
Jun 5, 2026
Merged

feat: simplify theme toggle to light/dark with current-view icon #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 4 additions & 7 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,10 @@
(function () {
try {
var stored = localStorage.getItem('theme');
var theme = (stored === 'light' || stored === 'dark' || stored === 'system') ? stored : 'system';
if (theme === 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}
} else {
document.documentElement.setAttribute('data-theme', theme);
if (stored === 'light' || stored === 'dark') {
document.documentElement.setAttribute('data-theme', stored);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}
} catch (e) {}
})();
Expand Down
2 changes: 1 addition & 1 deletion _includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<a href="{{ site.feed.path }}" class="navbar-item"><img src="{{ site.baseurl }}/assets/images/rss.png"/></a>
<a class="navbar-item theme-toggle" role="button" aria-label="Toggle theme" title="Toggle theme">
<span class="icon">
<i class="fa fa-desktop" aria-hidden="true"></i>
<i class="fa fa-moon-o" aria-hidden="true"></i>
</span>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/aggregate_default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<a href="{{ site.feed.path }}" class="navbar-item"><img src="{{ site.baseurl }}/assets/images/rss.png"/></a>
<a class="navbar-item theme-toggle" role="button" aria-label="Toggle theme" title="Toggle theme">
<span class="icon">
<i class="fa fa-desktop" aria-hidden="true"></i>
<i class="fa fa-moon-o" aria-hidden="true"></i>
</span>
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/author_default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<a href="{{ site.feed.path }}" class="navbar-item"><img src="{{ site.baseurl }}/assets/images/rss.png"/></a>
<a class="navbar-item theme-toggle" role="button" aria-label="Toggle theme" title="Toggle theme">
<span class="icon">
<i class="fa fa-desktop" aria-hidden="true"></i>
<i class="fa fa-moon-o" aria-hidden="true"></i>
</span>
</a>
</div>
Expand Down
49 changes: 24 additions & 25 deletions assets/js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,48 @@ layout: null
---
(function () {
var STORAGE_KEY = "theme";
var THEMES = ["light", "dark", "system"];
var ICONS = {
light: "fa-sun-o",
dark: "fa-moon-o",
system: "fa-desktop"
dark: "fa-moon-o"
};

function getStoredTheme() {
try {
var stored = localStorage.getItem(STORAGE_KEY);
return THEMES.indexOf(stored) >= 0 ? stored : "system";
return (stored === "light" || stored === "dark") ? stored : null;
} catch (e) {
return "system";
return null;
}
}

function applyTheme(theme) {
if (theme === "system") {
var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.removeAttribute("data-theme");
}
} else {
document.documentElement.setAttribute("data-theme", theme);
function getCurrentTheme() {
var stored = getStoredTheme();
if (stored) {
return stored;
}
var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
return prefersDark ? "dark" : "light";
}

function applyTheme(theme) {
document.documentElement.setAttribute("data-theme", theme);
}

function updateButtons(theme) {
var nextLabel = theme === "dark" ? "Switch to light theme" : "Switch to dark theme";
var buttons = document.querySelectorAll(".theme-toggle");
for (var i = 0; i < buttons.length; i++) {
var icon = buttons[i].querySelector(".fa");
if (icon) {
icon.className = "fa " + ICONS[theme];
}
buttons[i].setAttribute("aria-label", "Theme: " + theme + " (click to change)");
buttons[i].setAttribute("title", "Theme: " + theme + " (click to change)");
buttons[i].setAttribute("aria-label", nextLabel);
buttons[i].setAttribute("title", nextLabel);
}
}

function cycleTheme() {
var current = getStoredTheme();
var next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
function toggleTheme() {
var next = getCurrentTheme() === "dark" ? "light" : "dark";
try {
localStorage.setItem(STORAGE_KEY, next);
} catch (e) {}
Expand All @@ -55,22 +53,23 @@ layout: null
}

function init() {
var current = getStoredTheme();
updateButtons(current);
updateButtons(getCurrentTheme());

var buttons = document.querySelectorAll(".theme-toggle");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function (e) {
e.preventDefault();
cycleTheme();
toggleTheme();
});
}

if (window.matchMedia) {
var mql = window.matchMedia("(prefers-color-scheme: dark)");
var onChange = function () {
if (getStoredTheme() === "system") {
applyTheme("system");
if (getStoredTheme() === null) {
var sys = mql.matches ? "dark" : "light";
applyTheme(sys);
updateButtons(sys);
}
};
if (mql.addEventListener) {
Expand Down