If you have ever written CSS for a large web app then you know how hard it is to manage CSS. Add that to the increasing need to support dark and li...
For further actions, you may consider blocking this person and/or reporting abuse
If you only have a few themed variables, it's okay to store them in a single CSS file like main.css. If your light and dark themes are more elaborate, I would recommend splitting them into separate files.
You mention that you don't like this approach because of slow connections and high latency, but in cases where the user's connection or device is slow, it's better to only send them the theme they need, instead of both themes.
All these are valid arguments, but this is what works for me. I love having the primaries in one file as it makes maintenance very easy for me. I've never needed to split my variables into separate files, so splitting seems a bit overkill, but I understand what you are getting at.
Thanks for pointing this out.
You can also use the
prefers-color-schememedia query and automatically set the theme based on the OS settings!Thanks for pointing this out. I'm not sure why i left it out but you achieve that with this snippet.
document.addEventListener("DOMContentLoaded", () => {
const theme = document.querySelector(".theme");
const button = document.querySelector(".theme-switcher");
const mode = document.querySelector(".theme-switcher__current-mode");
button.addEventListener("click", () => toggleTheme(mode.innerText == "dark"));
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
// check for browser support
if (darkModeMediaQuery) {
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
toggleTheme(darkModeOn);
});
}
function toggleTheme(isDarkTheme) {
theme.classList.remove("theme_dark", "themelight");
if (isDarkTheme) {
theme.classList.add("themedark");
mode.innerText = "light";
} else {
theme.classList.add("theme_light");
mode.innerText = "dark";
}
}
});
Here is my solution for dark mode. It looks better.(is it?).
#javascript
#webdev
#tutorial
#css
Dark mode with 1(or few) line of CSS 🌓
Kavindu Santhusa ・ Nov 28 ・ 5 min read
images love your comment hhh
If you're following BEM methodology you should use -- for modifiers, ex theme--light
haha. Thanks for pointing that out. theme--light is the correct thing to do.
bhardwajzone.com/youtube-channel-i...
This method converts links from blue to yellow.
Take a look at this solution.
dev.to/ksengine/comment/1kclh
Thank you so much !
i'm glad you like it.
Nice post bro
Thanks, man.