Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Charts: ensure light/dark mode color updates (#28645)

Browse source
This commit is contained in:
Michael Geers 2026-03-30 11:20:25 +02:00 • committed by GitHub
parent de5b93e29d
commit 88cc66a611
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
assets/js/colors.ts
View file

@ -66,7 +66,7 @@ export const lighterColor = (color: string | null) => setAlpha(color, "aa");
export const fullColor = (color: string | null) => setAlpha(color, "ff");
function updateCssColors() {
export function updateCssColors() {
const style = window.getComputedStyle(document.documentElement);
colors.text = style.getPropertyValue("--evcc-default-text");
colors.muted = style.getPropertyValue("--bs-gray-medium");
@ -81,11 +81,6 @@ function updateCssColors() {
colors.light = style.getPropertyValue("--bs-gray-light");
}
// update colors on theme change
const darkModeMatcher = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
if (darkModeMatcher && darkModeMatcher.addEventListener) {
darkModeMatcher.addEventListener("change", updateCssColors);
}
// initialize colors
updateCssColors();
window.requestAnimationFrame(updateCssColors);

2
assets/js/theme.ts
View file

@ -1,3 +1,4 @@
import { updateCssColors } from "./colors";
import settings from "./settings";
import { THEME } from "./types/evcc";
@ -47,6 +48,7 @@ function updateTheme() {
$html.classList.add("no-transitions");
$html.classList.toggle("dark", theme === THEME.DARK);
$html.setAttribute("data-bs-theme", theme!);
requestAnimationFrame(updateCssColors);
window.setTimeout(function () {
$html.classList.remove("no-transitions");
}, 100);