NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-22 13:22:24 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

#6797: Fix color flashing when server mode doesn't match select mode or client preference

Browse Source
This commit is contained in:
checktheroads
2021-07-24 10:31:46 -07:00
parent bf2d535356
commit 189e733f81
9 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox-light.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

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

File diff suppressed because one or more lines are too long

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

@@ -21,7 +21,7 @@ function storeColorMode(mode: ColorMode): void {
}
function updateElements(targetMode: ColorMode): void {
document.body.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode);
document.documentElement.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode);
for (const text of getElements<HTMLSpanElement>('span.color-mode-text')) {
if (targetMode === 'light') {
@@ -79,9 +79,9 @@ function handleColorModeToggle(): void {
function defaultColorMode(): void {
// Get the current color mode value from local storage.
const currentValue = localStorage.getItem(COLOR_MODE_KEY) as Nullable<ColorMode>;
const bodyValue = document.body.getAttribute(`data-${COLOR_MODE_KEY}`);
const serverValue = document.documentElement.getAttribute(`data-${COLOR_MODE_KEY}`);
if (isTruthy(bodyValue) && isTruthy(currentValue)) {
if (isTruthy(serverValue) && isTruthy(currentValue)) {
return setColorMode(currentValue);
}
@@ -95,7 +95,7 @@ function defaultColorMode(): void {
}
}
if (isTruthy(currentValue) && !isTruthy(bodyValue) && isColorMode(currentValue)) {
if (isTruthy(currentValue) && !isTruthy(serverValue) && isColorMode(currentValue)) {
return setColorMode(currentValue);
}

6
netbox/project-static/src/netbox.ts
View File

@@ -13,7 +13,7 @@ import { initSideNav } from './sidenav';
import { initRackElevation } from './racks';
import { initLinks } from './links';
function init() {
function initAll() {
for (const init of [
initBootstrap,
initColorMode,
@@ -35,7 +35,7 @@ function init() {
}
if (document.readyState !== 'loading') {
init();
initAll();
} else {
document.addEventListener('DOMContentLoaded', init);
document.addEventListener('DOMContentLoaded', initAll);
}

2
netbox/project-static/styles/_dark.scss
View File

@@ -1,6 +1,6 @@
// Entry for netbox-dark.css stylesheet.
body[data-netbox-color-mode='dark'] {
html[data-netbox-color-mode='dark'] {
// Imports are scoped under the body when its data-netbox-color-mode attribute is set to 'dark'.
@import './theme-dark.scss';
@import './bootstrap.scss';

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

@@ -22,7 +22,7 @@
--nbx-search-filter-border-left-color: #{$gray-300};
--nbx-color-mode-toggle-color: #{$primary};
body[data-netbox-color-mode='dark'] {
&[data-netbox-color-mode='dark'] {
--nbx-sidebar-bg: #{$gray-900};
--nbx-sidebar-link-color: #{$gray-100};
--nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};