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
.dark-mode
class on the
body
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 ?