Kevin Powell - CommunityKP-C
Kevin Powell - Communityโ€ข3y agoโ€ข
17 replies
emeric_owczarz

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 ?
Was this page helpful?