Fix flicker on page load when color mode is set to dark #15340
Description
Deployment Type
NetBox Cloud
NetBox Version
v4.0
Python Version
3.11
Steps to Reproduce
- Open the NetBox UI as an anonymous user (not logged in)
- Click the toggle button at top right to switch to dark mode
- Navigate among pages several times
Expected Behavior
The application of the dark mode theme should persistent without interruption between page loads.
Observed Behavior
A "flicker" is sometimes visible when a new page loads, as the DOM is initially rendered in light mode and then switched to dark mode. This occurs because the user's preferred theme is being read from local storage after the DOM has finished loading.
Note that this does not occur when authenticated as a known user with the color preference set to dark mode. (In this case, data-bs-theme="dark" is set on each page's <body> tag directly in the page source.)