NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-08-18 05:28:16 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Restore dark mode togle functionality

Browse Source
This commit is contained in:
Jeremy Stretch 2024-01-17 12:46:26 -05:00
parent f28cae6197
commit cdba308597
5 changed files with 20 additions and 28 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.

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

@ -1,10 +1,6 @@
import { getElements, isTruthy } from './util'; import { getElements, isTruthy } from './util';
const COLOR_MODE_KEY = 'netbox-color-mode'; const COLOR_MODE_KEY = 'netbox-color-mode';
const TEXT_WHEN_DARK = 'Light Mode';
const TEXT_WHEN_LIGHT = 'Dark Mode';
const ICON_WHEN_DARK = 'mdi-lightbulb-on';
const ICON_WHEN_LIGHT = 'mdi-lightbulb';
/** /**
* Determine if a value is a supported color mode string value. * Determine if a value is a supported color mode string value.
@ -24,23 +20,11 @@ function storeColorMode(mode: ColorMode): void {
} }
function updateElements(targetMode: ColorMode): void { function updateElements(targetMode: ColorMode): void {
document.documentElement.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode); const body = document.querySelector('body');
if (body && targetMode == 'dark') {
for (const text of getElements<HTMLSpanElement>('span.color-mode-text')) { body.setAttribute('data-bs-theme', 'dark');
if (targetMode === 'light') { } else if (body) {
text.innerText = TEXT_WHEN_LIGHT; body.setAttribute('data-bs-theme', 'light');
} else if (targetMode === 'dark') {
text.innerText = TEXT_WHEN_DARK;
}
}
for (const icon of getElements<HTMLSpanElement>('i.color-mode-icon', 'span.color-mode-icon')) {
if (targetMode === 'light') {
icon.classList.remove(ICON_WHEN_DARK);
icon.classList.add(ICON_WHEN_LIGHT);
} else if (targetMode === 'dark') {
icon.classList.remove(ICON_WHEN_LIGHT);
icon.classList.add(ICON_WHEN_DARK);
}
} }
for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
@ -57,9 +41,8 @@ function updateElements(targetMode: ColorMode): void {
* @param mode Target color mode. * @param mode Target color mode.
*/ */
export function setColorMode(mode: ColorMode): void { export function setColorMode(mode: ColorMode): void {
for (const func of [storeColorMode, updateElements]) { storeColorMode(mode);
func(mode); updateElements(mode);
}
} }
/** /**

9
netbox/templates/base/base.html
View File

@ -7,6 +7,15 @@
lang="en" lang="en"
data-netbox-url-name="{{ request.resolver_match.url_name }}" data-netbox-url-name="{{ request.resolver_match.url_name }}"
data-netbox-base-path="{{ settings.BASE_PATH }}" data-netbox-base-path="{{ settings.BASE_PATH }}"
{% with preferences|get_key:'ui.colormode' as color_mode %}
{% if color_mode == 'dark'%}
data-netbox-color-mode="dark"
{% elif color_mode == 'light' %}
data-netbox-color-mode="light"
{% else %}
data-netbox-color-mode="unset"
{% endif %}
{% endwith %}
> >
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

8
netbox/templates/base/layout.html
View File

@ -51,12 +51,12 @@ Blocks:
<div class="navbar-nav flex-row align-items-center order-md-last"> <div class="navbar-nav flex-row align-items-center order-md-last">
{# Dark/light mode toggle #} {# Dark/light mode toggle #}
<div class="d-none d-md-flex"> <div class="d-none d-md-flex">
<a href="#" class="nav-link px-0 hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom"> <button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="mdi mdi-lightbulb"></i> <i class="mdi mdi-lightbulb"></i>
</a> </button>
<a href="#" class="nav-link px-0 hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom"> <button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="mdi mdi-lightbulb-on"></i> <i class="mdi mdi-lightbulb-on"></i>
</a> </button>
</div> </div>
{# User menu #} {# User menu #}
{% include 'inc/user_menu.html' %} {% include 'inc/user_menu.html' %}