From f85a7cb04de0d10bf3cce467545a34836356bf7a Mon Sep 17 00:00:00 2001 From: sanjeevneo <13029422+sanjeevneo@users.noreply.github.com> Date: Fri, 3 Nov 2023 02:15:02 +1100 Subject: [PATCH] Enhance navbar for dark mode support --- src/main/resources/static/js/darkmode.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js index e7c3b402..6e1c6ef3 100644 --- a/src/main/resources/static/js/darkmode.js +++ b/src/main/resources/static/js/darkmode.js @@ -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 => {