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

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 => {