1---
2category: Browser
3---
4 
5# useCssVar
6 
7Manipulate CSS variables
8 
9## Usage
10 
11```ts
12import { useCssVar } from '@vueuse/core'
13import { useTemplateRef } from 'vue'
14 
15const el = useTemplateRef('el')
16const color1 = useCssVar('--color', el)
17 
18const elv = useTemplateRef('elv')
19const key = ref('--color')
20const colorVal = useCssVar(key, elv)
21 
22const someEl = useTemplateRef('someEl')
23const color2 = useCssVar('--color', someEl, { initialValue: '#eee' })
24```
25 
26## Type Declarations
27 
28```ts
29export interface UseCssVarOptions extends ConfigurableWindow {
30  initialValue?: string
31  /**
32   * Use MutationObserver to monitor variable changes
33   * @default false
34   */
35  observe?: boolean
36}
37/**
38 * Manipulate CSS variables.
39 *
40 * @see https://vueuse.org/useCssVar
41 * @param prop
42 * @param target
43 * @param options
44 */
45export declare function useCssVar(
46  prop: MaybeRefOrGetter<string | null | undefined>,
47  target?: MaybeElementRef,
48  options?: UseCssVarOptions,
49): ShallowRef<string | undefined, string | undefined>
50```
51