jannik.menzel/iFSR-Website
1
0
Fork 0
mirror of https://github.com/jannikmenzel/iFSR-Website.git synced 2025-06-06 17:48:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

details shortcode

Browse source
This commit is contained in:
Jannik Menzel 2025-05-16 13:39:24 +02:00
parent d816a951dc
commit cc2fa1cea5
9 changed files with 414 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/js/main.js
View file

@ -1,3 +1,6 @@
/* ========================
Darkmode
======================== */
document.addEventListener("DOMContentLoaded", () => {
const themeSwitch = document.getElementById("theme-switch");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@ -6,20 +9,11 @@ document.addEventListener("DOMContentLoaded", () => {
document.documentElement.classList.toggle("dark", theme === "dark");
};
const getStoredTheme = () => localStorage.getItem("theme");
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
// Initial load
const savedTheme = getStoredTheme();
if (savedTheme) {
applyTheme(savedTheme);
} else {
applyTheme(prefersDarkScheme.matches ? "dark" : "light");
}
// system changes
prefersDarkScheme.addEventListener("change", (e) => {
const saved = getStoredTheme();
const saved = localStorage.getItem("theme");
if (!saved) {
applyTheme(e.matches ? "dark" : "light");
}
@ -33,7 +27,6 @@ document.addEventListener("DOMContentLoaded", () => {
setStoredTheme(newTheme);
});
const updateBodyThemeAttr = () => {
const current = document.documentElement.classList.contains("dark") ? "dark" : "light";
document.body.setAttribute("data-theme", current);
@ -47,4 +40,19 @@ document.addEventListener("DOMContentLoaded", () => {
prefersDarkScheme.addEventListener("change", () => {
updateBodyThemeAttr();
});
});
});
/* ========================
Details Toggle
======================== */
window.toggleDetails = function(element) {
element.classList.toggle('expanded');
const plusIcon = element.querySelector('.icon-plus');
const minusIcon = element.querySelector('.icon-minus');
const isExpanded = element.classList.contains('expanded');
plusIcon.style.display = isExpanded ? 'none' : 'inline';
minusIcon.style.display = isExpanded ? 'inline' : 'none';
};