starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Light/Dark Theme toggle: Logo, button icon, and tooltip don't update until page refresh #11845

New Issue
Closed
opened 2025-12-29 21:50:36 +01:00 by adam · 2 comments
adam commented 2025-12-29 21:50:36 +01:00
Owner
Copy Link

Originally created by @abubnalitic-nbl on GitHub (Nov 18, 2025).

Originally assigned to: @abubnalitic-nbl on GitHub.

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.

https://github.com/user-attachments/assets/6b8b2bb8-1b29-4689-b96e-f2729b156165

Steps to Reproduce

  1. Load any NetBox page in light mode
  2. Hover over the theme toggle button - tooltip says "Enable dark mode" ✓
  3. Click the theme toggle button to switch to dark mode
  4. 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")
  5. Refresh the page
  6. 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
Originally created by @abubnalitic-nbl on GitHub (Nov 18, 2025). Originally assigned to: @abubnalitic-nbl on GitHub. ## 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. https://github.com/user-attachments/assets/6b8b2bb8-1b29-4689-b96e-f2729b156165 ## Steps to Reproduce 1. Load any NetBox page in light mode 2. Hover over the theme toggle button - tooltip says "Enable dark mode" ✓ 3. Click the theme toggle button to switch to dark mode 4. **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") 5. Refresh the page 6. 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. ```css /* 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
adam added the type: bugstatus: acceptednetboxseverity: low labels 2025-12-29 21:50:36 +01:00
adam closed this issue 2025-12-29 21:50:36 +01:00
adam commented 2025-12-29 21:50:37 +01:00
Author
Owner
Copy Link

@abubnalitic-nbl commented on GitHub (Nov 18, 2025):

I have a branch that fixes the problem and happy to make a PR

@abubnalitic-nbl commented on GitHub (Nov 18, 2025): I have a branch that fixes the problem and happy to make a PR
adam commented 2025-12-29 21:50:38 +01:00
Author
Owner
Copy Link

@jnovinger commented on GitHub (Nov 19, 2025):

Thanks, @abubnalitic-nbl, assigned to you. Feel free to open a PR against main.

@jnovinger commented on GitHub (Nov 19, 2025): Thanks, @abubnalitic-nbl, assigned to you. Feel free to open a PR against `main`.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label netbox severity: low status: accepted type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#11845
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?