drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 01:12:03 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add blog list layout

Browse Source 
chore: add toc to mobile dropdown menu single items

chore: refactor sidebar

chore: add single layout for blog

chore: add vscode settings

chore: add blog section

chore: add devcontainer.json

chore: exclude icon from mobile nav

chore: support multiple theme switches

- simplify theme switch implementation using data attributes
- hide theme switch when sidebar is disabled

chore: add theme switch to footer

- enable when sidebar is disabled

chore: add format-date partial
This commit is contained in:
Xin
2023-08-07 23:48:07 +01:00
parent 2f34627da3
commit a7aa9fa1cb
16 changed files with 429 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/js/theme.js
View File

@ -1,44 +1,36 @@
// Dark theme toggle
// https://flowbite.com/docs/customize/dark-mode/
const themeToggleBtn = document.getElementById("theme-toggle");
const themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
const themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
const themeToggleButtons = document.querySelectorAll(".theme-toggle");
// Change the icons inside the button based on previous settings
if (
localStorage.getItem("color-theme") === "dark" ||
(!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
themeToggleLightIcon.classList.remove("hidden");
themeToggleButtons.forEach((el) => el.dataset.theme = "dark");
} else {
themeToggleDarkIcon.classList.remove("hidden");
themeToggleButtons.forEach((el) => el.dataset.theme = "light");
}
themeToggleBtn.addEventListener("click", function () {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle("hidden");
themeToggleLightIcon.classList.toggle("hidden");
// if set via local storage previously
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
themeToggleButtons.forEach((el) => {
el.addEventListener("click", function () {
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
}
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
}
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
}
}
el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
});
});