Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix flicker on page load when color mode is set to dark #15340

Closed
jeremystretch opened this issue Mar 4, 2024 · 1 comment
Closed

Fix flicker on page load when color mode is set to dark #15340

jeremystretch opened this issue Mar 4, 2024 · 1 comment
Assignees
@jeremystretch
Labels
severity: low Does not significantly disrupt application functionality, or a workaround is available status: accepted This issue has been accepted for implementation topic: UI/UX User interface or user experience related work type: bug A confirmed report of unexpected behavior in the application
Milestone
v4.0

Comments

@jeremystretch
Copy link
Member

Deployment Type

NetBox Cloud

NetBox Version

v4.0

Python Version

3.11

Steps to Reproduce

  1. Open the NetBox UI as an anonymous user (not logged in)
  2. Click the toggle button at top right to switch to dark mode
  3. 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.)
@jeremystretch jeremystretch added type: bug A confirmed report of unexpected behavior in the application status: needs owner This issue is tentatively accepted pending a volunteer committed to its implementation beta Concerns a bug/feature in a beta release topic: UI/UX User interface or user experience related work severity: low Does not significantly disrupt application functionality, or a workaround is available labels Mar 4, 2024
@jeremystretch jeremystretch mentioned this issue Mar 4, 2024
Closed
32 tasks
@jeremystretch jeremystretch removed the beta Concerns a bug/feature in a beta release label Mar 13, 2024
@jeremystretch jeremystretch added this to the v4.0 milestone Mar 13, 2024
jeremystretch added a commit that referenced this issue Mar 19, 2024
@jeremystretch
Fixes #15340: Fix flicker on page load with dark mode enabled
2eb3cbc
@jeremystretch jeremystretch mentioned this issue Mar 19, 2024
Merged
jeremystretch added a commit that referenced this issue Mar 19, 2024
@jeremystretch
Fixes #15340: Fix flicker on page load with dark mode enabled (#15475)
849a9d3
@jeremystretch jeremystretch self-assigned this Mar 19, 2024
@jeremystretch jeremystretch added status: accepted This issue has been accepted for implementation and removed status: needs owner This issue is tentatively accepted pending a volunteer committed to its implementation labels Mar 19, 2024
@samumatic
Copy link

This only works in Chrome, in Firefox the theme resets after a reload.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jeremystretch jeremystretch

Labels
severity: low Does not significantly disrupt application functionality, or a workaround is available status: accepted This issue has been accepted for implementation topic: UI/UX User interface or user experience related work type: bug A confirmed report of unexpected behavior in the application
Projects
None yet
Milestone
v4.0
Development

No branches or pull requests
2 participants
@jeremystretch @samumatic