kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-07-02 23:40:40 +02:00
Code

dark mode fixes

Browse Source
This commit is contained in:
Anthony Stirling 2023-12-10 15:29:12 +00:00
parent 28a9daff62
commit a94808fd19
1 changed files with 70 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/main/resources/static/js/darkmode.js
View File

@ -24,55 +24,86 @@ function getElements() {
elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon") elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon")
elements.navDropdownMenus = document.querySelectorAll("nav .dropdown-menu") elements.navDropdownMenus = document.querySelectorAll("nav .dropdown-menu")
} }
function setMode(mode) { function setMode(mode) {
var event = new CustomEvent("modeChanged", { detail: mode }) var event = new CustomEvent("modeChanged", { detail: mode });
document.dispatchEvent(event) document.dispatchEvent(event);
elements.lightModeStyles.disabled = mode !== "off"
elements.darkModeStyles.disabled = mode !== "on" if (elements && elements.lightModeStyles) {
elements.rainbowModeStyles.disabled = mode !== "rainbow" elements.lightModeStyles.disabled = mode !== "off";
var jumbotron = document.getElementById("jumbotron") }
if (elements && elements.darkModeStyles) {
elements.darkModeStyles.disabled = mode !== "on";
}
if (elements && elements.rainbowModeStyles) {
elements.rainbowModeStyles.disabled = mode !== "rainbow";
}
var jumbotron = document.getElementById("jumbotron");
if (mode === "on") { if (mode === "on") {
elements.darkModeIcon.src = "moon.svg" if (elements && elements.darkModeIcon) {
// Dark mode improvement elements.darkModeIcon.src = "moon.svg";
elements.searchBar.classList.add("dark-mode-search") }
elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white")) if (elements && elements.searchBar) {
// navbar toggle elements.searchBar.classList.add("dark-mode-search");
elements.navbar.classList.remove("navbar-light", "bg-light") }
elements.navbar.classList.add("navbar-dark", "bg-dark") if (elements && elements.formControls) {
navDropdownMenus.forEach(menu => menu.classList.add("dropdown-menu-dark")) elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"));
navIcons.forEach(icon => (icon.style.filter = "invert(1)")) }
// Add the table-dark class to tables for dark mode if (elements && elements.navbar) {
var tables = document.querySelectorAll(".table") elements.navbar.forEach(navElement => {
navElement.classList.remove("navbar-light", "bg-light");
navElement.classList.add("navbar-dark", "bg-dark");
});
}
if (elements && elements.navDropdownMenus) {
elements.navDropdownMenus.forEach(menu => menu.classList.add("dropdown-menu-dark"));
}
if (elements && elements.navIcons) {
elements.navIcons.forEach(icon => (icon.style.filter = "invert(1)"));
}
var tables = document.querySelectorAll(".table");
tables.forEach(table => { tables.forEach(table => {
table.classList.add("table-dark") table.classList.add("table-dark");
}) });
if (jumbotron) { if (jumbotron) {
jumbotron.classList.add("bg-dark") jumbotron.classList.add("bg-dark");
jumbotron.classList.remove("bg-light") jumbotron.classList.remove("bg-light");
} }
} else if (mode === "off") { } else if (mode === "off") {
elements.darkModeIcon.src = "sun.svg" if (elements && elements.darkModeIcon) {
// Dark Mode Improvement elements.darkModeIcon.src = "sun.svg";
elements.searchBar.classList.remove("dark-mode-search") }
elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white")) if (elements && elements.searchBar) {
// navbar toggle elements.searchBar.classList.remove("dark-mode-search");
elements.navbar.classList.remove("navbar-dark", "bg-dark") }
elements.navbar.classList.add("navbar-light", "bg-light") if (elements && elements.formControls) {
navDropdownMenus.forEach(menu => menu.classList.remove("dropdown-menu-dark")) elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"));
navIcons.forEach(icon => (icon.style.filter = "none")) }
// Remove the table-dark class for light mode if (elements && elements.navbar) {
var tables = document.querySelectorAll(".table-dark") elements.navbar.forEach(navElement => {
navElement.classList.remove("navbar-dark", "bg-dark");
navElement.classList.add("navbar-light", "bg-light");
});
}
if (elements && elements.navDropdownMenus) {
elements.navDropdownMenus.forEach(menu => menu.classList.remove("dropdown-menu-dark"));
}
if (elements && elements.navIcons) {
elements.navIcons.forEach(icon => (icon.style.filter = "none"));
}
var tables = document.querySelectorAll(".table-dark");
tables.forEach(table => { tables.forEach(table => {
table.classList.remove("table-dark") table.classList.remove("table-dark");
}) });
if (jumbotron) { if (jumbotron) {
console.log(mode) jumbotron.classList.remove("bg-dark");
jumbotron.classList.remove("bg-dark") jumbotron.classList.add("bg-light");
jumbotron.classList.add("bg-light")
} }
} else if (mode === "rainbow") { } else if (mode === "rainbow") {
elements.darkModeIcon.src = "rainbow.svg" if (elements && elements.darkModeIcon) {
elements.darkModeIcon.src = "rainbow.svg";
}
} }
} }