dave/site
1
0
Fork 0
mirror of https://github.com/davegallant/davegallant.github.io.git synced 2025-08-06 00:33:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme toggle back and default to 'auto'

Browse Source
This commit is contained in:
Dave Gallant
2024-01-12 16:55:10 -05:00
parent 24ad44a9ec
commit b913e9b4a3
5 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
themes/hugo-theme-gruvbox/assets/css/critical/15-colors.css
View File

@@ -6,8 +6,7 @@
{{ $backgroundColor = "bg0_h" }}
{{ end }}
@media (prefers-color-scheme: light) {
:root {
:root[data-theme="light"] {
--bg: var(--{{ $backgroundColor }});
--bg0: #fbf1c7;
--bg0_h: #f9f5d7;
@@ -42,11 +41,9 @@
& .light--hidden {
display: none;
}
}
}
@media (prefers-color-scheme: dark) {
:root {
:root[data-theme="dark"] {
--bg: var(--{{ $backgroundColor }});
--bg0: #282828;
--bg0_h: #1d2021;
@@ -83,11 +80,8 @@
}
}
}
:root {
{{ $themeColor := .Param "themeColor" | default "blue" }}
--primary: var(--{{ $themeColor }}1);
--primary-alt: var(--{{ $themeColor }}2);
}

48
themes/hugo-theme-gruvbox/assets/js/dark-mode.js
View File

@@ -1,11 +1,12 @@
function getTheme() {
if (window.matchMedia) {
// OS preference
return window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
if (localStorage && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
// Undefined
return "auto";
}
function saveTheme(theme) {
localStorage.setItem("theme", theme);
}
function setPrismTheme(theme) {
@@ -26,16 +27,39 @@ function setCommentsTheme(theme) {
}
}
// Initial load
const theme = getTheme();
if (theme) {
function setTheme(theme) {
if (theme == "auto") {
theme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
}
document.documentElement.setAttribute("data-theme", theme);
setPrismTheme(theme);
setCommentsTheme(theme);
}
function toggleTheme(e) {
const theme = e.currentTarget.classList.contains("light--hidden")
? "light"
: "dark";
setTheme(theme);
saveTheme(theme);
}
// Initial load
setTheme(getTheme());
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
const theme = event.matches ? "dark" : "light";
setPrismTheme(theme);
setCommentsTheme(theme);
setTheme(getTheme());
});
// This script is inlined in the <head> of the document, so we have to wait
// for the DOM content before can add event listeners to the toggle buttons
document.addEventListener("DOMContentLoaded", function () {
const toggleButtons = document.querySelectorAll(".theme__toggle");
toggleButtons.forEach((btn) => {
btn.addEventListener("click", toggleTheme);
});
});

7
themes/hugo-theme-gruvbox/layouts/partials/header.html
View File

@@ -52,4 +52,11 @@
</div>
</nav>
<button class="theme__toggle light--hidden" aria-label="Toggle light mode">
{{ partial "icons/tabler-icon.html" "sun" }}
</button>
<button class="theme__toggle dark--hidden" aria-label="Toggle dark mode">
{{ partial "icons/tabler-icon.html" "moon" }}
</button>
</header>