Light/Dark Theme toggle: Logo, button icon, and tooltip don't update until page refresh #20827
Description
Bug Description
When clicking the theme toggle button to switch between light and dark mode, the theme colors change immediately but the logo, button icon, and tooltip text do not update until the page is refreshed.
Screen.Recording.2025-11-18.at.3.11.47.PM.mov
Steps to Reproduce
- Load any NetBox page in light mode
- Hover over the theme toggle button - tooltip says "Enable dark mode" ✓
- Click the theme toggle button to switch to dark mode
- BUG: The page switches to dark mode colors, but:
- The NetBox logo doesn't switch to the bright teal version (stays dark teal)
- The toggle button icon doesn't update
- Hovering shows tooltip still says "Enable dark mode" (should say "Enable light mode")
- Refresh the page
- Now the logo, icon, and tooltip are correct
The same issue occurs when switching from dark mode back to light mode.
Expected Behavior
When clicking the theme toggle:
- Theme colors should change ✓
- Logo should immediately switch between dark teal (light mode) and bright teal (dark mode) versions
- Toggle button icon should update
- Tooltip should immediately show the correct text for the current mode
Suspected Root Cause
Tabler's CSS has broken .hide-theme-* utility classes that check for data-bs-theme on :root, but NetBox sets this attribute on <body>.
This causes elements to be shown/hidden incorrectly during theme switching.
/* Tabler's broken rule - checks :root but NetBox uses body */
:root:not([data-bs-theme=dark]) .hide-theme-light {
display: none !important;
}Since :root never has the data-bs-theme attribute, the selector behavior is incorrect, preventing the logo and buttons from switching
visibility properly.
Solution
Add CSS override rules in netbox/project-static/styles/overrides/_tabler.scss with higher specificity that correctly target
body[data-bs-theme] where the attribute actually exists.
Environment
- NetBox Version: 4.6.0
- Browser: Tested in Chrome
- Theme: Both light and dark mode switches affected