add darkmode, minimize js/css

project/assets/bootstrap.js

@@ -1,5 +1,5 @@
 import { startStimulusApp } from '@symfony/stimulus-bridge';
-
+import './services/theme_controller'
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
 export const app = startStimulusApp(require.context(
     '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
@@ -7,4 +7,3 @@ export const app = startStimulusApp(require.context(
     /\.[jt]sx?$/
 ));
 // register any custom, 3rd party controllers here
-// app.register('some_controller_name', SomeImportedController);

project/assets/controllers/thememode_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+export default class extends Controller {
+    modes;
+    currentState;
+    connect() {
+        this.modes = $(this.element).find('p');
+        this.currentState = localStorage.getItem('themeMode');
+        this.changeState()
+    }
+    switch(event) {
+        var mode = event.params.mode;
+        this.changeState(mode);
+
+    }
+
+    changeState(newState) {
+        if (typeof newState !== 'undefined') {
+            localStorage.setItem("themeMode", newState);
+            this.currentState = newState;
+        }
+        // $('html').attr('data-bs-theme', this.currentState);
+        this.modes.filter((e,tmp)=>{
+            const obj = $(tmp);
+            obj.toggle(!obj.hasClass(this.currentState));
+        })
+    }
+}

project/assets/services/theme_controller.js

@@ -0,0 +1,75 @@
+(() => {
+    'use strict'
+
+    const getStoredTheme = () => localStorage.getItem('theme')
+    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+    const getPreferredTheme = () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme) {
+            return storedTheme
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = theme => {
+        if (theme === 'auto') {
+            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = (theme, focus = false) => {
+        const themeSwitcher = document.querySelector('#bd-theme')
+
+        if (!themeSwitcher) {
+            return
+        }
+
+        const themeSwitcherText = document.querySelector('#bd-theme-text')
+        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+            element.setAttribute('aria-pressed', 'false')
+        })
+
+        btnToActive.classList.add('active')
+        btnToActive.setAttribute('aria-pressed', 'true')
+        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+        if (focus) {
+            themeSwitcher.focus()
+        }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+
+        document.querySelectorAll('[data-bs-theme-value]')
+            .forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const theme = toggle.getAttribute('data-bs-theme-value')
+                    console.log(theme)
+                    setStoredTheme(theme)
+                    setTheme(theme)
+                    showActiveTheme(theme, true)
+                })
+            })
+    })
+})()

project/assets/styles/main.less

@@ -1,5 +1,5 @@
 body {
-  background-color: #e6e6e6;
+  //background-color: #e6e6e6;
 }
 .reports-all {
   .col {