Registering the system them listener only once

webapp/src/main.tsx

@@ -4,11 +4,11 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import App from './app'
-import {loadTheme} from './theme'
+import {initThemes} from './theme'
 
 import './styles/variables.scss'
 import './styles/main.scss'
 import './styles/labels.scss'
 
-loadTheme()
+initThemes()
 ReactDOM.render(<App/>, document.getElementById('main-app'))

webapp/src/theme.ts

@@ -127,13 +127,6 @@ export function setTheme(theme: Theme | null): Theme {
 }
 
 export function loadTheme(): Theme {
-    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-    darkThemeMq.addListener(() => {
-        const themeStr = localStorage.getItem('theme')
-        if (!themeStr) {
-            setTheme(null)
-        }
-    })
     const themeStr = localStorage.getItem('theme')
     if (themeStr) {
         try {
@@ -146,3 +139,14 @@ export function loadTheme(): Theme {
         return setTheme(null)
     }
 }
+
+export function initThemes(): void {
+    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+    darkThemeMq.addEventListener('change', () => {
+        const themeStr = localStorage.getItem('theme')
+        if (!themeStr) {
+            setTheme(null)
+        }
+    })
+    loadTheme()
+}