How to create a Dark/Light theme switch



August 17, 2020

alt text

What's up guys? Hope you're having a good Monday so far 😎 Today we'll take a look at how easy it is to create a Dark/Light theme switch using CSS variables!

In terms of HTML, we just need some content and a toggle - we'll use a disguised checkbox - so we can switch the theme.

<div class="toggle-switch-container"> <label class="toggle-switch"> <input type="checkbox" id="toggle" /> <span class="slider"></span> </label> </div> <h1>WebDev Tips</h1> <p>Lorem ipsum dolor ...</p> <button>See more</button>

Basically what need to do now on our CSS is to first create some variables under the ':root' selector so they are available to all other selector. Here, I'm just creating vars for some default colors - background, main text, secondary text and accent.

:root { --bg-color: #f7f7f7; --main-text: #262626; --secondary-text: #666666; --acent-color: #4605ff; } [data-theme='dark'] { --bg-color: #111111; --main-text: #ffffff; --secondary-text: #f7f7f7; } .container-box { background-color: var(--bg-color); } h1 { color: var(--main-text); font-weight: 800; } p { color: var(--secondary-text); } button { background-color: var(--acent-color); border-radius: 50px; }

Then we'll use these same variables, with different values, but under the '[data-theme="dark"] selector. So when the body has the 'data-theme="dark"' attribute it will use these new variables instead of the default ones. Now we can simply use these vars throughout our styles, as needed.

const toggle = document.getElementById('toggle') const changeTheme = () => { if (document.body.getAttribute('data-theme') === 'dark') { document.body.removeAttribute('data-theme') } else { document.body.setAttribute('data-theme', 'dark') } } toggle.addEventListener('change', changeTheme)

Finally, we just need to create a function in Javascript that will remove or add the 'data-theme="dark"' attribute from the body, everytime the toggle is clicked.
And it's done! Let me know what you think of this tip 🤓🙏