add dark mode to your website

GitHub Brian Munoz

We will be using localStorage to persist what theme was selected and add a dark class to the body to create a dark theme with CSS.

HTML

A button element is needed to add a click event listener to swap between dark and light mode.

HTML 

<button id="themeSelector"></button>

JavaScript

We first want to make sure the page has finished loading before doing any operations to the DOM.

To do this we will use the load event listener.

JavaScript 

window.addEventListener('load', () => {
    // code
});

Once it is loaded we will check if a theme doesn’t exists in localStorage if it doesn’t we will set it to “light”.

JavaScript 

window.addEventListener('load', () => {
    if (!localStorage.getItem('theme')) {
        localStorage.setItem('theme', 'light');
    }
});

Currently, the button text content is empty we will now use the theme value in localStorage to assign an emoji to it.

Also if the current theme is “dark” we will add a dark class to the body. This class will be used to override CSS properties with dark theme styles.

JavaScript 

window.addEventListener('load', () => {
   // previous code
   
    const themeSelector = document.querySelector('#themeSelector');
    if (localStorage.getItem('theme') === 'dark') {
        // this class will be used to override styles
        document.body.classList.add('dark');
        themeSelector.textContent = '☀️';
    } else {
        themeSelector.textContent = '🌙️';
    }
});

Now we have to create the functionality to:

JavaScript 

window.addEventListener('load', () => {
    // previous code

    themeSelector.addEventListener('click', () => {
        if (localStorage.getItem('theme') === 'light') {
            localStorage.setItem('theme', 'dark');
            themeSelector.textContent = '☀️';
        } else {
            localStorage.setItem('theme', 'light');
            themeSelector.textContent = '🌙️';
        }

        document.body.classList.toggle('dark');
    });
});

If dark mode is enabled the body tag will have a dark class. We can use this class to target elements in CSS to apply a dark theme.

CSS 

.dark {
    background-color: #1a1d24; 
    color: #efefef;
}

The full JavaScript code.

JavaScript 

window.addEventListener('load', () => {
    if (!localStorage.getItem('theme')) {
        localStorage.setItem('theme', 'light');
    }

    const themeSelector = document.querySelector('#themeSelector');
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark');
        themeSelector.textContent = '☀️';
    } else {
        themeSelector.textContent = '🌙️';
    }

    themeSelector.addEventListener('click', () => {
        if (localStorage.getItem('theme') === 'light') {
            localStorage.setItem('theme', 'dark');
            themeSelector.textContent = '☀️';
        } else {
            localStorage.setItem('theme', 'light');
            themeSelector.textContent = '🌙️';
        }

        document.body.classList.toggle('dark');
    });
});

conclusion

We can toggle dark mode by clicking on the button, persist the theme chosen with localStorage and add dark theme styles by targeting the dark class given to the body element.

javascript
converting an object to a number

What happens when trying to convert an object to a number.