# Parameters Parameters Type Required Default Description variablesExpose the CSS variables of your choice to reactive properties. Using MutationObserver (opens new window)
Record<string, CssVarDef> true dictionary with the cssVariable name you wish to track/change options MutationObserverInit false defaultOptions Options passed to MutationObserver.observe MutationObserverInit (opens new window) element HTMLElement false document.documentElement element to keep track of CssVariables, it will default to document.documentElement if is in a client browser # State
The useCssVariables function exposes the following reactive states:
Boolean Returns true if MutationObserver is supported observing Ref<Boolean> A value that indicates if the observer is listening to CSS variable changes ...variables Ref<TVariables> Object with the same keys but with reactive CSS variable value # Methods
The useCssVariables function exposes the following methods:
resume Start observing the changes again stop Stops observing the changes
TIP
Calling stop() will stop observing for changes in the DOM, changes made to the ref will still update/override the style values.
Check the example bellow.
# ExampleOverride the value for --color-foreground:
I am a text with the following color: red
# CodeRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4