kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-11-04 23:10:11 +01:00
Code

Dark Mode Improvements

Browse Source
This commit is contained in:
Neo 2023-10-30 18:29:55 +11:00
parent 124c7801c5
commit c48c3e8897
2 changed files with 102 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/main/resources/static/css/home.css
View File

@ -1,15 +1,22 @@
#searchBar { #searchBar {
background-image: url('/images/search.svg'); background-image: url('/images/search.svg');
background-position: 16px 16px; background-position: 16px 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 12px 20px 12px 40px; padding: 12px 20px 12px 40px;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.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 { .features-container {
@ -25,10 +32,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
background: rgba(13, 110, 253, 0.05); background: rgba(13, 110, 253, 0.05);
transition: transform 0.3s, border 0.3s; transition: transform 0.3s, border 0.3s;
transform-origin: center center; transform-origin: center center;
outline: 2px solid transparent; outline: 2px solid transparent;
} }
.feature-card a { .feature-card a {

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

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