NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-25 01:48:38 -06:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Fixes #15617: Fix rack elevation styling under dark mode

Browse Source
This commit is contained in:
Jeremy Stretch 2024-04-05 13:52:53 -04:00
parent 25c39ce480
commit 99fe63569d
5 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.

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

Binary file not shown.

BIN
netbox/project-static/dist/rack_elevation.css vendored
View File

Binary file not shown.

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

@ -30,7 +30,7 @@ function updateElements(targetMode: ColorMode): void {
for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
const svg = elevation.contentDocument?.querySelector('svg') ?? null; const svg = elevation.contentDocument?.querySelector('svg') ?? null;
if (svg !== null) { if (svg !== null) {
svg.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode); svg.setAttribute(`data-bs-theme`, targetMode);
} }
} }
} }

11
netbox/project-static/styles/svg/rack_elevation.scss
View File

@ -8,23 +8,23 @@
svg { svg {
// Light mode values // Light mode values
--nbx-rack-bg: #{$gray-200}; --nbx-rack-bg: var(--tblr-bg-surface-secondary);
--nbx-rack-border: #{$black}; --nbx-rack-border: #{$black};
--nbx-rack-slot-bg: #{$gray-200}; --nbx-rack-slot-bg: #{$gray-200};
--nbx-rack-slot-border: #{$gray-500}; --nbx-rack-slot-border: #{$gray-500};
--nbx-rack-slot-hover-bg: #{$gray-400}; --nbx-rack-slot-hover-bg: #{$gray-400};
--nbx-rack-link-color: #{$blue}; --nbx-rack-link-color: #{$blue};
--nbx-rack-unit-color: #{$text-muted}; --nbx-rack-unit-color: #{$gray-600};
&[data-bs-theme='dark'] { &[data-bs-theme='dark'] {
// Dark mode values // Dark mode values
--nbx-rack-bg: #{$gray-800}; --nbx-rack-bg: rgb(27, 41, 58);
--nbx-rack-border: #{$gray-600}; --nbx-rack-border: #{$gray-600};
--nbx-rack-slot-bg: #{$gray-800}; --nbx-rack-slot-bg: #{$gray-800};
--nbx-rack-slot-border: #{$gray-700}; --nbx-rack-slot-border: #{$gray-700};
--nbx-rack-slot-hover-bg: #{$gray-900}; --nbx-rack-slot-hover-bg: #{$gray-900};
--nbx-rack-link-color: #{$blue-200}; --nbx-rack-link-color: #{$blue-200};
--nbx-rack-unit-color: #{$text-muted}; --nbx-rack-unit-color: #{$gray-500};
} }
} }
@ -41,6 +41,8 @@ text {
} }
svg { svg {
background-color: var(--nbx-rack-bg);
// Rack unit numbers along left side of rack elevation. // Rack unit numbers along left side of rack elevation.
.unit { .unit {
margin: 0; margin: 0;
@ -65,7 +67,6 @@ svg {
fill: none; fill: none;
stroke-width: 2px; stroke-width: 2px;
stroke: var(--nbx-rack-border); stroke: var(--nbx-rack-border);
background-color: var(--nbx-rack-bg);
} }
// Rack unit slot. // Rack unit slot.