keuangan/resources/js/bootstrap.js

import * as coreui from '@coreui/coreui';
window.coreui = coreui;

const THEME = 'coreui-free-bootstrap-admin-template-theme';

// Helper functions declared outside of event scopes so they stay clean
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' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-coreui-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-coreui-theme', theme);
    }
    document.documentElement.dispatchEvent(new Event('ColorSchemeChange'));
};

const showActiveTheme = theme => {
    const btnToActive = document.querySelector(`[data-coreui-theme-value="${theme}"]`);
    if (!btnToActive) return; // Guard clause in case toggle buttons aren't on the current page

    const activeThemeIcon = document.querySelector('.theme-icon-active');
    const svgOfActiveBtn = btnToActive.querySelector('svg');

    for (const element of document.querySelectorAll('[data-coreui-theme-value]')) {
        element.classList.remove('active');
    }

    btnToActive.classList.add('active');

    if (activeThemeIcon && svgOfActiveBtn) {
        const useElement = svgOfActiveBtn.querySelector('use');
        if (useElement) {
            const activeUseElement = activeThemeIcon.querySelector('use');
            if (activeUseElement) {
                activeUseElement.setAttribute('xlink:href', useElement.getAttribute('xlink:href'));
            }
        } else {
            activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML;
        }
    }
};

// 1. Run theme initialization immediately on file execution to prevent dark-mode flashbangs
(() => {
    const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
    if (urlParams.get('theme') && ['auto', 'dark', 'light'].includes(urlParams.get('theme'))) {
        localStorage.setItem(THEME, urlParams.get('theme'));
    }
    setTheme(getPreferredTheme());
})();

// System preferences watcher
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    const storedTheme = getStoredTheme();
    if (storedTheme !== 'light' && storedTheme !== 'dark') {
        setTheme(getPreferredTheme());
    }
});

// 2. CORE LIVEWIRE FIX: Run UI bindings on every single page navigation step
document.addEventListener('livewire:navigated', () => {
    const preferredTheme = getPreferredTheme();

    // initiate sidebar toggle
    const toggleButton = document.querySelector('.header-toggler');
    const sidebar = document.querySelector('.sidebar');
    if(toggleButton) {
        toggleButton.addEventListener('click', () => {
            window.coreui.Sidebar.getOrCreateInstance(sidebar).toggle();
        })
    }

    // Ensure the state continues to match after navigation
    setTheme(preferredTheme);
    showActiveTheme(preferredTheme);

    // Re-attach query click listeners to newly swapped DOM elements
    for (const toggle of document.querySelectorAll('[data-coreui-theme-value]')) {
        toggle.addEventListener('click', () => {
            const theme = toggle.getAttribute('data-coreui-theme-value');
            setStoredTheme(theme);
            setTheme(theme);
            showActiveTheme(theme);
        });
    }
});