drag and drop mobile polyfill , localstorage api.
Design comparison
Solution retrospective
- Is it okay to have different stylesheet for light and dark mode
Community feedback
- @mattari97Posted over 2 years ago
Hello.
I would recommend to use css variables to toggle the theme.
You would use something in js like :
function toggleTheme() { document.documentElement.classList.toggle("darkmode") }
Then in css at the top of the stylesheet:
--color-1: #fff;
--color-2: #333;
--background-color: var(--color-1)
.darkmode { --background-color: var(color-2); }
body { backgroud-color: var(--background-color) }
Like this you dont have to duplicate the whole stylesheet which make it painfull if you need to track changes on both everytime.
Peace
Marked as helpful0@niol08Posted over 2 years ago@AntoineC-dev thanks for the feedback. I'd try to implement this method next time.
0 - @Deevyn9Posted over 2 years ago
Hi Ola, great solution you have here. About your question, normally it is said that you shouldn’t tweak it as long as it works 😃. However, one of the most important things to consider when building is speed optimization, and after checking your solution, it doesn’t appear to have any issues with it speed, so it doesn’t appear to be wrong.
Happy coding 🎈
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord