DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Merge pull request #455 from sanjeevneo/main

Browse source 
Optimize Dark Mode Toggle for Additional UI Elements
This commit is contained in:
Anthony Stirling 2023-10-30 10:34:27 +00:00 committed by GitHub
commit 18c5f5bb2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 102 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/main/resources/static/css/home.css
View file

@ -10,6 +10,13 @@
}
.dark-mode-search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' hei… 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
color: #f8f9fa !important;
background-color: #212529 !important;
border-color: #343a40 !important;
}
.features-container {

158
src/main/resources/static/js/darkmode.js
View file

@ -1,90 +1,98 @@
var toggleCount = 0;
var lastToggleTime = Date.now();
var toggleCount = 0
var lastToggleTime = Date.now()
var elements = {
lightModeStyles: null,
darkModeStyles: null,
rainbowModeStyles: null,
darkModeIcon: null
};
lightModeStyles: null,
darkModeStyles: null,
rainbowModeStyles: null,
darkModeIcon: 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.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")
}
function setMode(mode) {
var event = new CustomEvent('modeChanged', { detail: mode });
document.dispatchEvent(event);
elements.lightModeStyles.disabled = mode !== "off";
elements.darkModeStyles.disabled = mode !== "on";
elements.rainbowModeStyles.disabled = mode !== "rainbow";
var jumbotron = document.getElementById('jumbotron');
if (mode === "on") {
elements.darkModeIcon.src = "moon.svg";
// Add the table-dark class to tables for dark mode
var tables = document.querySelectorAll('.table');
tables.forEach(table => {
table.classList.add('table-dark');
});
if(jumbotron) {
jumbotron.classList.add('bg-dark');
jumbotron.classList.remove('bg-light');
}
} else if (mode === "off") {
elements.darkModeIcon.src = "sun.svg";
// Remove the table-dark class for light mode
var tables = document.querySelectorAll('.table-dark');
tables.forEach(table => {
table.classList.remove('table-dark');
});
if(jumbotron){
console.log(mode)
jumbotron.classList.remove('bg-dark');
jumbotron.classList.add('bg-light');
}
} else if (mode === "rainbow") {
elements.darkModeIcon.src = "rainbow.svg";
}
var event = new CustomEvent("modeChanged", { detail: mode })
document.dispatchEvent(event)
elements.lightModeStyles.disabled = mode !== "off"
elements.darkModeStyles.disabled = mode !== "on"
elements.rainbowModeStyles.disabled = mode !== "rainbow"
var jumbotron = document.getElementById("jumbotron")
if (mode === "on") {
elements.darkModeIcon.src = "moon.svg"
// Dark mode improvement
elements.searchBar.classList.add("dark-mode-search")
elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
// Add the table-dark class to tables for dark mode
var tables = document.querySelectorAll(".table")
tables.forEach(table => {
table.classList.add("table-dark")
})
if (jumbotron) {
jumbotron.classList.add("bg-dark")
jumbotron.classList.remove("bg-light")
}
} else if (mode === "off") {
elements.darkModeIcon.src = "sun.svg"
// Dark Mode Improvement
elements.searchBar.classList.remove("dark-mode-search")
elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
// Remove the table-dark class for light mode
var tables = document.querySelectorAll(".table-dark")
tables.forEach(table => {
table.classList.remove("table-dark")
})
if (jumbotron) {
console.log(mode)
jumbotron.classList.remove("bg-dark")
jumbotron.classList.add("bg-light")
}
} else if (mode === "rainbow") {
elements.darkModeIcon.src = "rainbow.svg"
}
}
function toggleDarkMode() {
var currentTime = Date.now();
if (currentTime - lastToggleTime < 1000) {
toggleCount++;
} else {
toggleCount = 1;
}
lastToggleTime = currentTime;
var currentTime = Date.now()
if (currentTime - lastToggleTime < 1000) {
toggleCount++
} else {
toggleCount = 1
}
lastToggleTime = currentTime
if (toggleCount >= 18) {
localStorage.setItem("dark-mode", "rainbow");
setMode("rainbow");
} else if (localStorage.getItem("dark-mode") == "on") {
localStorage.setItem("dark-mode", "off");
setMode("off");
} else {
localStorage.setItem("dark-mode", "on");
setMode("on");
}
if (toggleCount >= 18) {
localStorage.setItem("dark-mode", "rainbow")
setMode("rainbow")
} else if (localStorage.getItem("dark-mode") == "on") {
localStorage.setItem("dark-mode", "off")
setMode("off")
} else {
localStorage.setItem("dark-mode", "on")
setMode("on")
}
}
document.addEventListener("DOMContentLoaded", function() {
getElements();
document.addEventListener("DOMContentLoaded", function () {
getElements()
var currentMode = localStorage.getItem("dark-mode");
if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
setMode(currentMode);
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
setMode("on");
} else {
setMode("off");
}
var currentMode = localStorage.getItem("dark-mode")
if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
setMode(currentMode)
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
setMode("on")
} else {
setMode("off")
}
document.getElementById("dark-mode-toggle").addEventListener("click", function(event) {
event.preventDefault();
toggleDarkMode();
});
});
document.getElementById("dark-mode-toggle").addEventListener("click", function (event) {
event.preventDefault()
toggleDarkMode()
})
})