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

New Issue

MrUnknownDE · 2026-04-05T18:13:33+02:00

MrUnknownDE commented

2026-04-05 18:13:33 +02:00

Originally created by @abubnalitic-nbl on 11/18/2025

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

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

*Originally created by @abubnalitic-nbl on 11/18/2025* ## 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

MrUnknownDE closed this issue

2026-04-05 18:13:33 +02:00

Sign in to join this conversation.

Branches Tags

main

21455-sql-indexes-audit

21357-register-model-actions

feature

20924-plugin-ui-components

21766-improve-test-coverage-for-sortable-table-columns

21157-export-template-public-models

21025-pre-render-config-contexts

21364-swagger

feature-ip-prefix-link

20911-dropdown-3

fix_module_substitution

21160-filterset

20911-dropdown-2

20044-elevation-stuck-lightmode

7604-filter-modifiers-v3

20660-script-load

19724-graphql

14884-script

19720-macaddress-interface-generic-relation

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

No Label netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox netbox severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low severity: low status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted status: accepted type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug type: bug

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/netbox#859