place data-varam on any scope to represent CSS var
<samp data-varam="oil ink">- only scoped mentions will change
- scope page via root
<html data-varam="oil ink">- combine data with URL params to update matching
var - combining
?oil=olive&ink=blackwould style eachvar
--oil: olive;
--ink: black;background: var(--oil);
color: var(--ink);font-size: var(--size, 1em);
writing-mode: var(--mode, horizontal-tb);?oil=orange&ink=black🚥 varam automagically runs when you load varam.js
<script async src="varam.js"></script>- URL params are read and only read
- CSS var are updated where matching
- async or defer to your desire
- performant updating
- we minimize reflow
- just load the script to go with the flow with real URL
- updaters return boolean whether reflow expected
- update if you change dom (otherwise no need)
varam.flow()automagic doesvaram(location.search)with real URLvaram.reset()to reset state likevaram("")but leave URL alonevaram.fresh(...)is how varam performantly interacts with style
truewhen update was madefalsewhen update needless
varam.help() for help in your console
varam.metacontent interpretedvaram.statelatest statevaram.viaparamethod"flow"or"meta"
- default checks
location.searchnot meta - staging meta simulates alternate search
- omit meta unless you're staging
<meta name="varam" content="oil=purple">