Dark mode in your website
You can create a toggle for dark and light theme in CSS by using a combination of CSS variables, media queries, and JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /* defining color variables (globally) in css */
:root{
--bg-color : white;
--text-color : black;
/*These names are generalised to avoid confusion*/
--theme-bg-color : black;
--theme-text-color: white
}
/* light mode styles */
body{
background-color : var(--bg-color);
color : var(--text-color);
}
/* This will apply the dark mode styles when the user's device is set to use a dark color scheme. */
@media(prefers-color-scheme: dark){
body {
background-color : var(--theme-bg-color);
color : var(--theme-text-color);
}
}
|
Create a button in your html to toggle the theme.
1
| <button class="toggle_theme">Toggle theme</button>
|
Add this js snippet, to toggle css variables when the button is clicked
1
2
3
4
| const toggleBtn = document.querySelector(".toggle_theme");
toggleBtn.addEventListener('click', ()=>{
document.body.classList.toggle('dark-theme');
})
|
Define css for your .dark-theme class:
1
2
3
4
5
6
| .dark-theme{
--bg-color : black;
--text-color : white;
--theme-bg-color: white;
--theme-text-color: black;
}
|
This will toggle the values of the CSS variables when the button is clicked, which will change the background and text colors of the page.
In conclusion, prefers-color-scheme media query sets the theme automatically based on the user’s device settings, while the .dark-theme class allows for manual toggling between light and dark modes.
If you found this helpful, please give a shoutout to @gsavitha_ and share this article to help others. For more articles like this, subscribe to my Newsletter and get the latest updates straight to your inbox.