@joshdail
Posted
Hi Abula,
Here's what I've found helpful as far as adding a dark mode into a project.
On the <body> tag in the html, I add a data attribute for light mode or dark mode. I use the data attribute to define the color schemes and switch between them. You could also use a class instead of a data attribute if you want.
<body data-display="light">
CSS custom properties are very helpful for adding a dark mode or other settings. What I do is define my basic color scheme with properties on the :root element at the beginning of my file. It takes some time to set up, but it will really help later on. Here's an example from a different project I did:
:root {
--clr-text-placeholder: hsl(184, 14%, 56%);
--clr-background-body: hsl(185, 41%, 84%);
--clr-background-input: hsl(189, 41%, 97%);
--clr-text-alert: hsl(9, 31%, 58%);
--clr-text-dark: hsl(183, 100%, 15%);
--clr-text-faded: hsl(186, 14%, 43%);
}
Then, I add CSS rules that will replace the original colors if the mode is changed to dark. This is just a small example, but you can understand the idea:
body[data-display="dark"] {
--clr-background-body: hsl(185, 41%, 4%);
--clr-background-calculator: hsl(184, 27%, 22%);
--clr-background-input: hsl(189, 41%, 7%);
--clr-text-alert: hsl(45, 87%, 59%);
--clr-text-dark: hsl(183, 60%, 10%);
--clr-text-faded: hsl(0, 0%, 100%);
}
Then, in my CSS rules, I use the custom properties. So when I set background color, instead of using the actual value I use my custom property.
.alert {
color: var(--clr-text-alert);
}
.input {
background-color: var(--clr-background-input);
color: var(--clr-text-dark);
}
To switch themes, I'll usually have a button on the page. You can set up an event listener on the button that will switch the data-attribute (or class) on the body tag when the button is pressed. Here's a snippet from a script I wrote for a project.
displayBtn.addEventListener("click", e => {
body.getAttribute("data-display") === "dark"
? setDisplayMode("light")
: setDisplayMode("dark")
displayBtn.blur()
})
function setDisplayMode(displayMode) {
sessionStorage.setItem("SPLITTER_DISPLAY_MODE", displayMode)
body.setAttribute("data-display", displayMode)
}
The session storage code will make sure it stays in light or dark mode if the page is refreshed, but it won't save the light/dark mode setting if the browser window closes. You'd have to use something like local storage for that.
This is just one solution, there are other ways you can add dark mode as well.
This article on CSS Tricks has some good info on adding dark mode: CSS Tricks: A Complete Guide to Dark Mode on the Web
You can also look on Youtube for Kevin Powell, he has some videos on making a light and dark mode or different color schemes. I've found his videos very helpful in my own learning.
Kind regards,
Josh Dail
