feat(theme): listen for system theme changes [R8S-1190] (#3265)

app/react/portainer/services/applyTheme.ts

@@ -1,14 +1,31 @@
 import { ThemeColor } from '@/portainer/users/types';
 
+let removeAutoThemeListener: (() => void) | null = null;
+
 export function applyTheme(color: ThemeColor) {
+  removeAutoThemeListener?.();
+  removeAutoThemeListener = null;
+
   if (color === 'auto' || !color) {
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    if (isDark) {
+
-      document.documentElement.setAttribute('theme', 'dark');
+    function handleChange() {
-    } else {
+      applyAutoTheme(mediaQuery);
-      document.documentElement.removeAttribute('theme');
     }
+
+    applyAutoTheme(mediaQuery);
+    mediaQuery.addEventListener('change', handleChange);
+    removeAutoThemeListener = () =>
+      mediaQuery.removeEventListener('change', handleChange);
   } else {
     document.documentElement.setAttribute('theme', color);
   }
 }
+
+function applyAutoTheme(mediaQuery: MediaQueryList) {
+  if (mediaQuery.matches) {
+    document.documentElement.setAttribute('theme', 'dark');
+  } else {
+    document.documentElement.removeAttribute('theme');
+  }
+}