Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Preference</title>
</head>
<body>
    <h1>Theme Preference</h1>
    <label for="themeSelect">Select a Theme:</label>
    <select id="themeSelect">
        <option value="light">Light Theme</option>
        <option value="dark">Dark Theme</option>
    </select>
    <br>
    <button>Save Theme Preference</button>

    <script>
        function saveThemePreference() {
            let theme = document.getElementById('themeSelect').value;
            document.cookie = `theme=${theme};`;
            alert(`Theme preference set to ${theme}`);
        }

        function getThemePreference() {
            let cookies = document.cookie.split(';').map(cookie => cookie.trim());
            let cookie = cookies.find(cookie => cookie.startsWith('theme='));
            if (cookie) {
                let theme = cookie.split('=')[1];
                applyTheme(theme);
            }
        }

        function applyTheme(theme) {
            document.body.className = theme;
        }

        document.querySelector('button').addEventListener('click', (e) => {
            saveThemePreference();
        });

        document.addEventListener('DOMContentLoaded', () => {
            getThemePreference();
        });
    </script>

    <style>
        body.light {
            background-color: #f5f5f5;
            color: #333;
        }

        body.dark {
            background-color: #333;
            color: #fff;
        }
    </style>
</body>
</html>