diff --git a/assets/js/colors.ts b/assets/js/colors.ts
index 384f5b721..f47242ec5 100644
--- a/assets/js/colors.ts
+++ b/assets/js/colors.ts
@@ -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);
diff --git a/assets/js/theme.ts b/assets/js/theme.ts
index ab0dba8d3..9c394ca37 100644
--- a/assets/js/theme.ts
+++ b/assets/js/theme.ts
@@ -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);