How can I implement dark mode using CSS?

How can I implement dark mode using CSS?

You can implement dark mode using CSS by defining a separate set of styles for dark mode and toggling them based on user preference.

Can you show me an example of the CSS code for dark mode?

Sure! Here's a simple example:

body {
    background-color: #121212;
    color: #ffffff;
}

button {
    background-color: #1e1e1e;
    color: #ffffff;
}

This will change the background to dark and text to white.

How do I toggle between light and dark mode?

You can use JavaScript to toggle a class on the body element. For example:

const toggleButton = document.getElementById('toggle');
toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

Make sure to define the dark mode styles in your CSS.

Is there a way to remember the user's preference for dark mode?

Yes! You can use localStorage to save the user's preference. When the user selects dark mode, save it in localStorage and check it on page load to apply the correct theme.