diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index b7b1bbf88..cf7695998 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index c00343ab3..9be60854f 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/colorMode.ts b/netbox/project-static/src/colorMode.ts index dfd05df4f..7883a9630 100644 --- a/netbox/project-static/src/colorMode.ts +++ b/netbox/project-static/src/colorMode.ts @@ -1,10 +1,6 @@ import { getElements, isTruthy } from './util'; 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. @@ -24,23 +20,11 @@ function storeColorMode(mode: ColorMode): void { } function updateElements(targetMode: ColorMode): void { - document.documentElement.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode); - - for (const text of getElements('span.color-mode-text')) { - if (targetMode === 'light') { - text.innerText = TEXT_WHEN_LIGHT; - } else if (targetMode === 'dark') { - text.innerText = TEXT_WHEN_DARK; - } - } - for (const icon of getElements('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); - } + const body = document.querySelector('body'); + if (body && targetMode == 'dark') { + body.setAttribute('data-bs-theme', 'dark'); + } else if (body) { + body.setAttribute('data-bs-theme', 'light'); } for (const elevation of getElements('.rack_elevation')) { @@ -57,9 +41,8 @@ function updateElements(targetMode: ColorMode): void { * @param mode Target color mode. */ export function setColorMode(mode: ColorMode): void { - for (const func of [storeColorMode, updateElements]) { - func(mode); - } + storeColorMode(mode); + updateElements(mode); } /** diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index 2a8495626..1958fa556 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -7,6 +7,15 @@ lang="en" data-netbox-url-name="{{ request.resolver_match.url_name }}" 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 %} > diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 01ab5b4db..fff12c1e8 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -51,12 +51,12 @@ Blocks:
{# Dark/light mode toggle #}
- + +
{# User menu #} {% include 'inc/user_menu.html' %}