/**
 * -----------------------
 * Color themes
 * -----------------------
 */
function toggleColorTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('color-theme', newTheme);
}

function updateButtonText() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const button = document.querySelector('.color-theme-toggle');
    button.textContent = currentTheme === 'dark' ? '𖤓' : '🌙';
}

document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('color-theme');
    if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
    } else {
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    }
    updateButtonText();

    const button = document.querySelector('.color-theme-toggle');
    button.addEventListener('click', () => {
        toggleColorTheme();
        updateButtonText();
    });
});

/**
 * -----------------------
 * Sidebar toggle
 * -----------------------
 */

function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    sidebar.classList.toggle('collapsed');
}

document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('.sidebar-toggle');
    button.addEventListener('click', toggleSidebar);
});