feat: migrate theme switcher to Stimulus controller

Author: camilleislasse

…AdminUi/assets/scripts/theme-switcher.js …controllers/theme-switcher-controller.jssrc/BootstrapAdminUi/assets/scripts/theme-switcher.js renamed to src/BootstrapAdminUi/assets/controllers/theme-switcher-controller.js src/BootstrapAdminUi/assets/scripts/theme-switcher.js renamed to src/BootstrapAdminUi/assets/controllers/theme-switcher-controller.js

@@ -1,10 +1,10 @@
-const toggleButton = document.querySelector('[data-theme-toggle]');
+import { Controller } from '@hotwired/stimulus';
 
-if (toggleButton) {
-    toggleButton.addEventListener('click', () => {
+export default class extends Controller {
+    toggle() {
         const current = document.documentElement.getAttribute('data-bs-theme') || 'light';
         const next = current === 'dark' ? 'light' : 'dark';
         localStorage.setItem('sylius-theme', next);
         document.documentElement.setAttribute('data-bs-theme', next);
-    });
+    }
 }

src/BootstrapAdminUi/assets/entrypoint.js

@@ -14,4 +14,3 @@ import './scripts/check-all';
 import './scripts/menu-search';
 
 import './scripts/bootstrap';
-import './scripts/theme-switcher';

src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig

@@ -1,5 +1,5 @@
-<div class="nav-item">
-    <button class="btn btn-icon btn-ghost-secondary" data-theme-toggle aria-label="Toggle theme">
+<div class="nav-item" {{ stimulus_controller('theme-switcher') }}>
+    <button class="btn btn-icon btn-ghost-secondary" {{ stimulus_action('theme-switcher', 'toggle') }} aria-label="Toggle theme">
         {{ ux_icon('tabler:sun', {'class': 'icon', 'data-theme-switch': 'light'}) }}
         {{ ux_icon('tabler:moon', {'class': 'icon', 'data-theme-switch': 'dark'}) }}
     </button>