18
loading...
Simplest way to Add Dark Theme to any Website
I like fancy websites. You know websites that have great UI/UX, impressive load time speed, pretty animations, Scalable Vector Images, Dark theme and light theme toggle button.
But the problem is... I suck at CSS and JS (at this moment, I'm working on it duh 🙄). As a result, many tutorials and blog articles on how to implement these fancy features on a website aren't exactly for me.
The question is: what's the simplest, most basic way to add dark theme functionality to my website?
I'm also not interested in copying code I don't understand.
I'm also not interested in copying code I don't understand.
The best way to learn they say is by building, so I woke up two days ago and was like, lets do this!
My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.
My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.
I chose to follow a minimalist design for he website. After writing some basic HTML and CSS, I added the dark theme functionality with the following CSS code:
/* Light mode by System theme */
@media (prefers-color-scheme: light) {
body {
background-color: inherit;
color: inherit;
}
}
/* Dark mode by System theme*/
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: whitesmoke;
}
}prefers-color-scheme checks if the user has selected light or dark theme. The user can do this either via the operating system settings or via the browser settings.prefers-color-scheme
18