Great article! I'm adding this to my students reading list this year. In your demo I don't think you need to set the background of .theme-container.light to var(--c-background) again. Or am I missing something?
As you can see here you would use --c-background because you have set it up in the container with --c-background: var(--c-light-background);
This makes the code more extendable. Think now you would have a 3 or 4 or 5 theme you would only need to change the code in one place. .theme-container.<THEME NAME>.
so you can have a solarized theme or a pink theme and so on.
Yeah I get that. I'm talking about the background property on .theme-container.light. I commented out to show what I mean.
.theme-container{--c-background:var(--c-dark-background);--c-checkbox:var(--c-dark-checkbox);background:var(--c-background);background-blend-mode:multiply,multiply;transition:0.4s;}.theme-container.light{--c-background:var(--c-light-background);--c-checkbox:var(--c-light-checkbox);/* background: var(--c-background); *//* I don't think this rule is necessary since you already set it on the main .theme-container. */}
Great article! I'm adding this to my students reading list this year. In your demo I don't think you need to set the background of .theme-container.light to var(--c-background) again. Or am I missing something?
I think you are talking about this example:
So this is the
.theme-container
and yeah here it looks confusing but imagines you have a bigger app and want to use the right background again.As you can see here you would use
--c-background
because you have set it up in the container with--c-background: var(--c-light-background);
This makes the code more extendable. Think now you would have a 3 or 4 or 5 theme you would only need to change the code in one place.
.theme-container.<THEME NAME>
.so you can have a
solarized
theme or apink
theme and so on.Yeah I get that. I'm talking about the background property on .theme-container.light. I commented out to show what I mean.
Ahh okay!
Now I understand.
There is no technical reason for that.
It is just to make it more clear to other people what is going on here.