Is global the right way to go? #32
Description
This could be done with a wrapping element that does not affect the dom's structure beyond css. A mix of setProperty() and removeProperty() could be used to handle the theme transitions.
I do like your object storage for variable settings. A lot cleaner than what I was working on.
Possible benefits:
Global default variables could be defined in script to handle non-js systems. (rare to be sure)
-- global defaults also allow for partial rewrites of the variables. (i.e. no need to rewrite media breakpoints unless desired.)
Applying to a wrapping element allows for the nesting of variable settings. Perhaps modals look different.
Named wrappers could still use localStorage for defaults.
This allows for easier real-time changes with user-defined themes.
Property setters make the code cleaner since you don't have to build complex strings beyond your tiered variable names.
Listed below is a simple example. Everything in the slot would see the variable --txtColor as red.
display: contents; removes the wrapper from creating display issues (grids, etc).
<script>
import { onMount } from 'svelte';
let el;
onMount(() => {
el.style.setProperty('--txtColor','red')
});
</script>
<div bind:this={el} style="display: contents; ">
<slot ></slot>
</div>