/varam

change CSS var via URL param with this 77 line library called varam

Primary LanguageJavaScriptBSD Zero Clause License0BSD

varam

🟣 online latest

change CSS var via URL param

mention desired param

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=black would style each var
--oil: olive;
--ink: black;

var your style

background: var(--oil);
color: var(--ink);

code sensible default style

font-size: var(--size, 1em);
writing-mode: var(--mode, horizontal-tb);

code hyperlinks with &amp;

?oil=orange&amp;ink=black

javascript

automagic

🚥 varam automagically runs when you load varam.js

<script async src="varam.js"></script>

updating

  • 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)

updaters

  • varam.flow() automagic does varam(location.search) with real URL
  • varam.reset() to reset state like varam("") but leave URL alone
  • varam.fresh(...) is how varam performantly interacts with style

boolean

  • true when update was made
  • false when update needless

help

varam.help() for help in your console

diagnostic

  • varam.meta content interpreted
  • varam.state latest state
  • varam.via paramethod "flow" or "meta"

staging

  • default checks location.search not meta
  • staging meta simulates alternate search
  • omit meta unless you're staging
<meta name="varam" content="oil=purple">

technology