How to Save Dark Mode Preference in Local Storage!

To save a dark mode preference in local storage using HTML, CSS, and JavaScript, you can follow these steps:

DOCTYPE Declaration: Specifies that this is an HTML5 document.Head Section:

Contains metadata, character set, viewport settings for responsiveness, and a link to the CSS file for styling.
Sets the title of the page.

Body Section:

Includes a heading (<h1>) and a button (<button>) to toggle dark mode.
Links to the JavaScript file for functionality.

1. HTML Structure

#html<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Dark Mode Example</title>
</head>
<body>
    <h1>Dark Mode Toggle</h1>
    <button id="toggle-button">Toggle Dark Mode</button>

    <script src="script.js"></script>
</body>
</html>

save dark mode in html css js in localstorage coding filters

2. CSS Style

#css
body {
    transition: background-color 0.3s, color 0.3s;
  text-align: center;
}

.light-mode {
    background-color: white;
    color: black;
}

.dark-mode {
    background-color: black;
    color: white;
}

Transition Effect:
- The transition property on the body element provides a smooth change between background and text colors over 0.3 seconds.
Light Mode Styles:
- light-mode class sets a white background and black text.
Dark Mode Styles:
- dark-mode class sets a black background and white text.

3. JavaScript Logic

#javascript
const toggleButton = document.getElementById('toggle-button');
const body = document.body;

// Check local storage for the dark mode preference
if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
} else {
    body.classList.add('light-mode');
}

// Toggle dark mode
toggleButton.addEventListener('click', () => {
    if (body.classList.contains('dark-mode')) {
        body.classList.remove('dark-mode');
        body.classList.add('light-mode');
        localStorage.setItem('theme', 'light'); // Save preference
    } else {
        body.classList.remove('light-mode');
        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark'); // Save preference
    }
});

a. Variable Declarations

toggleButton:
- Selects the button element by its ID (toggle-button).
body:
- References the body of the document for easy class manipulation.

b. Check Local Storage

localStorage.getItem('theme'):
- On page load, it checks if there’s a saved theme preference in local storage.
- If the stored theme is ‘dark’, it applies the dark-mode class; otherwise, it defaults to light-mode.

c. Event Listener for Toggling

toggleButton.addEventListener('click', ...):
- Listens for clicks on the toggle button.
- Inside the callback function, it checks if the body currently has the dark-mode class.
Toggling Classes:
- If the dark-mode class is present:
  - It removes dark-mode and adds light-mode.
  - Updates local storage to save the light mode preference.
- If light-mode is present:
  - It removes light-mode and adds dark-mode.
  - Updates local storage to save the dark mode preference.

How It Works

HTML: The structure includes a button to toggle dark mode.
CSS: Defines styles for light and dark modes, with smooth transitions.
JavaScript:
- Checks localStorage for a saved theme preference on page load and applies the corresponding class to the body.
- Adds an event listener to the toggle button, which switches between light and dark modes and updates localStorage accordingly.

Testing

Open your HTML file in a web browser.
Click the “Toggle Dark Mode” button to switch modes. The preference will be saved, so when you refresh the page, it will remember your choice.

This setup provides a simple way to implement dark mode with local storage in a web application!

Developers Simplify Complex Code at Coding Filters!

Developers often struggle with overly complex code that is hard to maintain and debug. By applying coding filters, developers can break down complex tasks into smaller, more manageable pieces, resulting in simpler, cleaner code. Filters help to target specific data or processes, enhancing both performance and readability.

Author

Emma Johnson

View all posts