document.addEventListener('DOMContentLoaded', (event) => {
    const body = document.body;
    // تبديل السمات المظلمة والفاتحة
    const toggleSwitch = document.getElementById('dark-mode');
    const toggleThemeClasses = (theme) => {
        document.documentElement.setAttribute('data-theme', theme); 
    };
    
    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const currentTheme = prefersDarkScheme ? 'dark' : 'light';
    toggleThemeClasses(currentTheme);
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
    
    toggleSwitch.addEventListener('change', () => {
        if (toggleSwitch.checked) {
            toggleThemeClasses('dark');
        } else {
            toggleThemeClasses('light');
        }
    });
});