Install event listener only once

Author: MrSerth

app/assets/javascripts/editor.js

@@ -16,13 +16,13 @@ $(document).on('turbo-migration:load', function(event) {
   if ($('#editor').isPresent() && CodeOceanEditor && event.detail.url.includes("/implement")) {
     CodeOceanEditor.initializeEverything();
   }
+});
 
-  function handleThemeChangeEvent(event) {
-    if (CodeOceanEditor) {
-      CodeOceanEditor.THEME = event.detail.currentTheme === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow';
-      document.dispatchEvent(new Event('theme:change:ace'));
-    }
+function handleThemeChangeEvent(event) {
+  if (CodeOceanEditor) {
+    CodeOceanEditor.THEME = event.detail.currentTheme === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow';
+    document.dispatchEvent(new Event('theme:change:ace'));
   }
+}
 
-  $(document).on('theme:change', handleThemeChangeEvent.bind(this));
-});
+$(document).on('theme:change', handleThemeChangeEvent);

lib/assets/javascripts/color_mode_picker.js

@@ -77,16 +77,9 @@ function showActiveTheme(theme, focus = false) {
     }
 }
 
-$(document).on('turbo-migration:load', function() {
+$(document).on('turbo:load', function() {
     setTheme(getPreferredTheme())
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
-        }
-    })
-
     showActiveTheme(getPreferredTheme())
 
     document.querySelectorAll('[data-bs-theme-value]')
@@ -99,3 +92,10 @@ $(document).on('turbo-migration:load', function() {
             })
         })
 })
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+        setTheme(getPreferredTheme())
+    }
+})