script.js

// Theme toggle functionality
document.addEventListener('DOMContentLoaded', () => {
    // Check for saved theme preference or use preferred color scheme
    if (localStorage.getItem('color-theme') === 'dark' || 
        (!('color-theme' in localStorage) && 
        window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }

    // API data fetching example
    async function fetchDashboardData() {
        try {
            // In a real app, you would fetch from your API
            const response = await fetch('https://api.example.com/dashboard');
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error fetching dashboard data:', error);
            return null;
        }
    }

    // Initialize dashboard with data
    fetchDashboardData().then(data => {
        if (data) {
            // Process and display data
            console.log('Dashboard data loaded:', data);
        }
    });

    // Add event listeners for interactive elements
    document.querySelectorAll('[data-toggle-theme]').forEach(button => {
        button.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('color-theme', 
                document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });
    });
});

// Function to handle data export
function exportData(format) {
    console.log(`Exporting data as ${format}`);
    // In a real app, implement actual export functionality
    alert(`Exporting dashboard data as ${format.toUpperCase()}`);
}

// Function to refresh dashboard data
function refreshDashboard() {
    console.log('Refreshing dashboard data');
    // In a real app, implement actual refresh functionality
    window.location.reload();
}