Stirling-PDF/src/main/resources/static/js/darkmode.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

105 lines
3.1 KiB
JavaScript
Raw Normal View History

var toggleCount = 0;
var lastToggleTime = Date.now();
2023-06-02 21:15:10 +02:00
var elements = {
2023-10-30 08:29:55 +01:00
lightModeStyles: null,
darkModeStyles: null,
rainbowModeStyles: null,
darkModeIcon: null,
2023-11-02 16:15:02 +01:00
searchBar: null,
formControls: null,
navIcons: null,
navDropdownMenus: null,
};
function getElements() {
elements.lightModeStyles = document.getElementById("light-mode-styles");
elements.darkModeStyles = document.getElementById("dark-mode-styles");
elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
elements.darkModeIcon = document.getElementById("dark-mode-icon");
elements.searchBar = document.getElementById("searchBar");
elements.formControls = document.querySelectorAll(".form-control");
elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
}
function setMode(mode) {
2023-12-10 16:29:12 +01:00
var event = new CustomEvent("modeChanged", { detail: mode });
document.dispatchEvent(event);
if (elements && elements.lightModeStyles) {
elements.lightModeStyles.disabled = mode !== "off";
}
if (elements && elements.darkModeStyles) {
elements.darkModeStyles.disabled = mode !== "on";
}
if (elements && elements.rainbowModeStyles) {
elements.rainbowModeStyles.disabled = mode !== "rainbow";
}
var jumbotron = document.getElementById("jumbotron");
2023-10-30 08:29:55 +01:00
if (mode === "on") {
2023-12-10 16:29:12 +01:00
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "dark_mode";
2023-12-10 16:29:12 +01:00
}
var tables = document.querySelectorAll(".table");
tables.forEach((table) => {
2023-12-10 16:29:12 +01:00
table.classList.add("table-dark");
});
2023-10-30 08:29:55 +01:00
} else if (mode === "off") {
2023-12-10 16:29:12 +01:00
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "light_mode";
2023-12-10 16:29:12 +01:00
}
var tables = document.querySelectorAll(".table-dark");
tables.forEach((table) => {
2023-12-10 16:29:12 +01:00
table.classList.remove("table-dark");
});
2023-10-30 08:29:55 +01:00
} else if (mode === "rainbow") {
2023-12-10 16:29:12 +01:00
if (elements && elements.darkModeIcon) {
2024-05-18 13:48:01 +02:00
elements.darkModeIcon.textContent = "looks";
2023-12-10 16:29:12 +01:00
}
2023-10-30 08:29:55 +01:00
}
}
2023-06-02 21:15:10 +02:00
function toggleDarkMode() {
var currentTime = Date.now();
2023-10-30 08:29:55 +01:00
if (currentTime - lastToggleTime < 1000) {
toggleCount++;
2023-10-30 08:29:55 +01:00
} else {
toggleCount = 1;
2023-10-30 08:29:55 +01:00
}
lastToggleTime = currentTime;
2023-06-02 21:15:10 +02:00
2024-05-18 13:48:01 +02:00
document.body.classList.add("transition-theme");
2023-10-30 08:29:55 +01:00
if (toggleCount >= 18) {
localStorage.setItem("dark-mode", "rainbow");
setMode("rainbow");
2023-10-30 08:29:55 +01:00
} else if (localStorage.getItem("dark-mode") == "on") {
localStorage.setItem("dark-mode", "off");
setMode("off");
2023-10-30 08:29:55 +01:00
} else {
localStorage.setItem("dark-mode", "on");
setMode("on");
2023-10-30 08:29:55 +01:00
}
2023-06-02 21:15:10 +02:00
}
2023-10-30 08:29:55 +01:00
document.addEventListener("DOMContentLoaded", function () {
getElements();
2023-10-30 08:29:55 +01:00
var currentMode = localStorage.getItem("dark-mode");
2023-10-30 08:29:55 +01:00
if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
setMode(currentMode);
2023-10-30 08:29:55 +01:00
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
setMode("on");
2023-10-30 08:29:55 +01:00
} else {
setMode("off");
2023-10-30 08:29:55 +01:00
}
2023-06-02 21:15:10 +02:00
2023-12-16 11:35:45 +01:00
var darkModeToggle = document.getElementById("dark-mode-toggle");
if (darkModeToggle !== null) {
darkModeToggle.addEventListener("click", function (event) {
event.preventDefault();
toggleDarkMode();
});
}
});