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

Merge pull request #460 from sanjeevneo/main

Browse Source 
Enhance navbar for dark mode support
This commit is contained in:
Anthony Stirling 2023-11-02 19:16:48 +00:00 committed by GitHub
commit 12f5a5e6d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,11 @@ var elements = {
darkModeStyles: null, darkModeStyles: null,
rainbowModeStyles: null, rainbowModeStyles: null,
darkModeIcon: null, darkModeIcon: null,
searchBar: null,
formControls: null,
navbar: null,
navIcons: null,
navDropdownMenus: null,
} }
function getElements() { function getElements() {
@ -15,6 +20,9 @@ function getElements() {
elements.darkModeIcon = document.getElementById("dark-mode-icon") elements.darkModeIcon = document.getElementById("dark-mode-icon")
elements.searchBar = document.getElementById("searchBar") elements.searchBar = document.getElementById("searchBar")
elements.formControls = document.querySelectorAll(".form-control") elements.formControls = document.querySelectorAll(".form-control")
elements.navbar = document.querySelectorAll("nav.navbar")
elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon")
elements.navDropdownMenus = document.querySelectorAll("nav .dropdown-menu")
} }
function setMode(mode) { function setMode(mode) {
@ -29,6 +37,11 @@ function setMode(mode) {
// Dark mode improvement // Dark mode improvement
elements.searchBar.classList.add("dark-mode-search") elements.searchBar.classList.add("dark-mode-search")
elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white")) elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
// navbar toggle
elements.navbar.classList.remove("navbar-light", "bg-light")
elements.navbar.classList.add("navbar-dark", "bg-dark")
navDropdownMenus.forEach(menu => menu.classList.add("dropdown-menu-dark"))
navIcons.forEach(icon => (icon.style.filter = "invert(1)"))
// Add the table-dark class to tables for dark mode // Add the table-dark class to tables for dark mode
var tables = document.querySelectorAll(".table") var tables = document.querySelectorAll(".table")
tables.forEach(table => { tables.forEach(table => {
@ -43,6 +56,11 @@ function setMode(mode) {
// Dark Mode Improvement // Dark Mode Improvement
elements.searchBar.classList.remove("dark-mode-search") elements.searchBar.classList.remove("dark-mode-search")
elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white")) elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
// navbar toggle
elements.navbar.classList.remove("navbar-dark", "bg-dark")
elements.navbar.classList.add("navbar-light", "bg-light")
navDropdownMenus.forEach(menu => menu.classList.remove("dropdown-menu-dark"))
navIcons.forEach(icon => (icon.style.filter = "none"))
// Remove the table-dark class for light mode // Remove the table-dark class for light mode
var tables = document.querySelectorAll(".table-dark") var tables = document.querySelectorAll(".table-dark")
tables.forEach(table => { tables.forEach(table => {