From 0c39baae47a765d42d8bdb195a958b1279a24c2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sun, 21 Mar 2021 08:51:22 +0100
Subject: [PATCH] Registering the system them listener only once

---
 webapp/src/main.tsx |  4 ++--
 webapp/src/theme.ts | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
index 381d9862a..fa191101f 100644
--- a/webapp/src/main.tsx
+++ b/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'))
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
index 57d0d7058..c853b27b2 100644
--- a/webapp/src/theme.ts
+++ b/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()
+}