Dark Mode Improvements
This commit is contained in:
Neo
parent
124c7801c5
commit
c48c3e8897
2 changed files with 102 additions and 87 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue