From c48c3e88977eb8f435fdbef963d988e4be35ce84 Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 30 Oct 2023 18:29:55 +1100 Subject: [PATCH] Dark Mode Improvements --- src/main/resources/static/css/home.css | 29 ++-- src/main/resources/static/js/darkmode.js | 160 ++++++++++++----------- 2 files changed, 102 insertions(+), 87 deletions(-) diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css index 9bd1ce70..ab3b3348 100644 --- a/src/main/resources/static/css/home.css +++ b/src/main/resources/static/css/home.css @@ -1,15 +1,22 @@ -#searchBar { - background-image: url('/images/search.svg'); - background-position: 16px 16px; - background-repeat: no-repeat; - width: 100%; - font-size: 16px; +#searchBar { + background-image: url('/images/search.svg'); + background-position: 16px 16px; + background-repeat: no-repeat; + width: 100%; + font-size: 16px; margin-bottom: 12px; - padding: 12px 20px 12px 40px; + padding: 12px 20px 12px 40px; 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 { @@ -25,10 +32,10 @@ display: flex; flex-direction: column; 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; transform-origin: center center; - outline: 2px solid transparent; + outline: 2px solid transparent; } .feature-card a { diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js index ebf9c683..e7c3b402 100644 --- a/src/main/resources/static/js/darkmode.js +++ b/src/main/resources/static/js/darkmode.js @@ -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"); - } - - document.getElementById("dark-mode-toggle").addEventListener("click", function(event) { - event.preventDefault(); - toggleDarkMode(); - }); -}); + 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() + }) +})