RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes #20934: Fix flicker when navigating in dark mode (#21650)

This commit is contained in:
Jeremy Stretch 2026-03-12 12:38:04 -04:00 committed by GitHub
parent fea6ad61fd
commit ae0907fb37
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.css vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

6
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
netbox/project-static/src/colorMode.ts
View File

@ -20,12 +20,7 @@ function storeColorMode(mode: ColorMode): void {
}
function updateElements(targetMode: ColorMode): void {
const body = document.querySelector('body');
if (body && targetMode == 'dark') {
body.setAttribute('data-bs-theme', 'dark');
} else if (body) {
body.setAttribute('data-bs-theme', 'light');
}
document.documentElement.setAttribute('data-bs-theme', targetMode);
for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
const svg = elevation.firstElementChild ?? null;

2
netbox/project-static/styles/custom/_misc.scss
View File

@ -112,7 +112,7 @@ img.plugin-icon {
}
body[data-bs-theme=dark] {
html[data-bs-theme=dark] {
// Assuming icon is black/white line art, invert it and tone down brightness
img.plugin-icon {
filter: grayscale(100%) invert(100%) brightness(80%);

15
netbox/project-static/styles/overrides/_tabler.scss
View File

@ -93,7 +93,7 @@ pre {
}
// Dark mode overrides
body[data-bs-theme=dark] {
html[data-bs-theme=dark] {
// Override background color alpha value
::selection {
background-color: rgba(var(--tblr-primary-rgb),.48);
@ -174,16 +174,11 @@ pre code {
}
// Theme-based visibility utilities
// Tabler's .hide-theme-* utilities expect data-bs-theme on :root, but NetBox applies
// it to body. These overrides use higher specificity selectors to ensure theme-based
// visibility works correctly. The :root:not(.dummy) pattern provides the additional
// specificity needed to override Tabler's :root:not() rules.
:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-light,
:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-dark {
:root:not(.dummy)[data-bs-theme='light'] .hide-theme-light,
:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-dark {
display: none !important;
}
:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-dark {
:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-light,
:root:not(.dummy)[data-bs-theme='light'] .hide-theme-dark {
display: inline-flex !important;
}

4
netbox/project-static/styles/transitional/_navigation.scss
View File

@ -77,13 +77,13 @@
}
// Light theme styling
body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
// Background Gradient
background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
}
// Dark theme styling
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
// Background Gradient
background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;

2
netbox/project-static/styles/transitional/_tables.scss
View File

@ -59,7 +59,7 @@ table th.orderable a {
color: var(--#{$prefix}body-color);
}
body[data-bs-theme=dark] {
html[data-bs-theme=dark] {
// Adjust table header background color
.table thead th, .markdown>table thead th {
background: $rich-black !important;