test-darkmode.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container mt-5">
        <h1>Dark Mode Test</h1>
        <button class="btn btn-primary" id="testToggle">Toggle Dark Mode</button>

        <div class="card mt-3">
            <div class="card-header">
                <h5>Test Card</h5>
            </div>
            <div class="card-body">
                <p>This is a test card to check dark mode styling.</p>
                <input type="text" class="form-control mb-2" placeholder="Test input">
                <textarea class="form-control" rows="3" placeholder="Test textarea"></textarea>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/zustand@4.4.7/index.umd.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/store.js"></script>
    <script>
        document.getElementById('testToggle').addEventListener('click', () => {
            useStore.getState().toggleDarkMode();
            console.log('Dark mode:', useStore.getState().darkMode);
        });

        // Initialize dark mode from storage
        const darkMode = localStorage.getItem('darkMode');
        if (darkMode === 'true') {
            document.body.classList.add('dark-mode');
        }
    </script>
</body>
</html>