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

Enhance navbar for dark mode support

Browse Source
This commit is contained in:
sanjeevneo 2023-11-03 02:15:02 +11:00
parent 18c5f5bb2b
commit f85a7cb04d
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,
rainbowModeStyles: null,
darkModeIcon: null,
searchBar: null,
formControls: null,
navbar: null,
navIcons: null,
navDropdownMenus: null,
}
function getElements() {
@ -15,6 +20,9 @@ function getElements() {
elements.darkModeIcon = document.getElementById("dark-mode-icon")
elements.searchBar = document.getElementById("searchBar")
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) {
@ -29,6 +37,11 @@ function setMode(mode) {
// Dark mode improvement
elements.searchBar.classList.add("dark-mode-search")
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
var tables = document.querySelectorAll(".table")
tables.forEach(table => {
@ -43,6 +56,11 @@ function setMode(mode) {
// Dark Mode Improvement
elements.searchBar.classList.remove("dark-mode-search")
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
var tables = document.querySelectorAll(".table-dark")
tables.forEach(table => {