emeric_owczarz
KPCKevin Powell - Community
•Created by emeric_owczarz on 9/8/2023 in #front-end
Dark mode / dark theme implementation in SASS
Hi, i'm trying to upgrade my portfolio step by step and right now, i'd like to implement a dark mode.
I'm using a custom SASS framework which defines color variables, and uses them through the website.
So, as SASS is generated once at build time, how is it possible to have a "simple" solution to implement a toggle which would allow to change color rendering on my website when dark/light mode is checked ?
The JS part is ok, but i can't quite figure out the SASS/CSS part.
What i mean by that is, i'm looking for a solution in which i don't have to go specific on each component that requires dark mode, but rather throw a
.dark-mode class on the body tag and rely on the cascade to do the work.
Is it illusionary, or even possible in SASS ?
Will it be generating a much big css file of unused/duplicated styles ?
Is this possible with CSS variables only ?18 replies