diff --git a/docs/.vuepress/components/CssVariablesExample.vue b/docs/.vuepress/components/CssVariablesExample.vue
new file mode 100644
index 000000000..62a58183c
--- /dev/null
+++ b/docs/.vuepress/components/CssVariablesExample.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div>
+      <label for="foreground-value"
+        >Override the value for <code>--color-foreground</code>:</label
+      >
+      <input
+        type="text"
+        id="foreground-value"
+        @input="set('color-foreground', $event.target.value)"
+        :model="foreground"
+      />
+    </div>
+
+    <div class="text" style="color: var(--color-foreground)">
+      <span v-if="listening">
+        I am a text with the following color:
+      </span>
+      <span v-else>
+        My color will be updated but not my label:
+      </span>
+      {{ foreground }}
+    </div>
+
+    <div>
+      <button type="button" @click="stop()" :disabled="!listening">
+        Stop listening
+      </button>
+      <button type="button" @click="resume()" :disabled="listening">
+        Resume listening
+      </button>
+      <button
+        type="button"
+        @click="foreground = get('color-foreground')"
+        :disabled="listening"
+      >
+        Manual label update
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useCssVariables } from "../../../packages/web/dist/web.cjs.js";
+import { ref } from "@vue/composition-api";
+
+export default {
+  name: "css-variables-example",
+  setup() {
+    const { stop, resume, get, set, listening, foreground } = useCssVariables({
+      foreground: "color-foreground"
+    });
+
+    set("color-foreground", "red");
+
+    return {
+      listening,
+      stop,
+      resume,
+      get,
+      set,
+      listening,
+      foreground,
+      document
+    };
+  }
+};
+</script>
+
+<style scoped>
+div > div {
+  margin-top: 15px;
+}
+
+.text {
+  margin: 15px 0;
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e195aff18..e68d9eeb1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -166,7 +166,8 @@ module.exports = {
             ["composable/web/pageVisibility", "PageVisibilityAPI"],
             ["composable/web/language", "Language"],
             ["composable/web/broadcastChannel", "BroadcastChannel API"],
-            ["composable/web/geolocation", "Geolocation API"]
+            ["composable/web/geolocation", "Geolocation API"],
+            ["composable/web/cssVariables", "CSS variables"]
           ]
         },
         {
diff --git a/docs/README.md b/docs/README.md
index 4c67382a0..44d1ef1f3 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -102,6 +102,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [Language](composable/web/language) - reactive `NavigatorLanguage`
 - [BroadcastChannel](composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation](composable/web/geolocation) - reactive `Geolocation API`
+- [CSS variables](composable/web/cssVariables) - reactive `CSS variables`
 
 ### Validation
 
diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index b047b898c..a1b4c0e41 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -3,88 +3,115 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
-import { Ref } from '@vue/composition-api';
-import { RefElement } from '@vue-composable/core';
-import { RefTyped } from '@vue-composable/core';
+import { Ref } from "@vue/composition-api";
+import { RefElement } from "@vue-composable/core";
+import { RefTyped } from "@vue-composable/core";
 
 // @public (undocumented)
 export type BreakpointObject = Record<string, string | number>;
 
 // @public (undocumented)
-export type BreakpointReturn<T> = Record<keyof T, Ref<boolean>> & BreakpointReturnObject<T>;
+export type BreakpointReturn<T> = Record<keyof T, Ref<boolean>> &
+  BreakpointReturnObject<T>;
 
 // @public (undocumented)
 export interface BreakpointReturnObject<T> {
-    // (undocumented)
-    current: Ref<keyof T | undefined>;
-    // (undocumented)
-    remove: RemoveEventFunction;
+  // (undocumented)
+  current: Ref<keyof T | undefined>;
+  // (undocumented)
+  remove: RemoveEventFunction;
 }
 
 // @public (undocumented)
 export interface BroadcastMessageEvent<T> extends MessageEvent {
-    // (undocumented)
-    readonly data: T;
+  // (undocumented)
+  readonly data: T;
+}
+
+// @public
+export type CssVariable = string | null;
+
+// @public
+export type CssVariableConfigurationObject = Record<string, string>;
+
+// @public
+export type CssVariableObject<T> = Record<keyof T, Ref<CssVariable>>;
+
+// @public
+export interface CssVariablesMethods {
+  get: (name: string, element: HTMLElement) => CssVariable;
+  resume: () => void;
+  set: (name: string, value: CssVariable, element: HTMLElement) => void;
+  stop: () => void;
 }
 
 // @public (undocumented)
 export interface DefaultTailwindBreakpoints {
-    // (undocumented)
-    lg: 1024;
-    // (undocumented)
-    md: 768;
-    // (undocumented)
-    sm: 640;
-    // (undocumented)
-    xl: 1280;
+  // (undocumented)
+  lg: 1024;
+  // (undocumented)
+  md: 768;
+  // (undocumented)
+  sm: 640;
+  // (undocumented)
+  xl: 1280;
 }
 
 // Warning: (ae-forgotten-export) The symbol "TailwindConfigEmpty" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export type ExtractTailwindScreens<T extends TailwindConfigEmpty> = keyof T["theme"]["screens"] extends never ? DefaultTailwindBreakpoints : T["theme"]["screens"];
+export type ExtractTailwindScreens<
+  T extends TailwindConfigEmpty
+> = keyof T["theme"]["screens"] extends never
+  ? DefaultTailwindBreakpoints
+  : T["theme"]["screens"];
 
 // @public (undocumented)
 export interface GeolocationOptions {
-    immediate?: boolean;
+  immediate?: boolean;
 }
 
+// @public
+export function getVariableFor(
+  name: string,
+  element?: HTMLElement
+): CssVariable;
+
 // @public (undocumented)
 export interface IntersectionObserverOptions {
-    // (undocumented)
-    root?: RefTyped<Element> | null;
-    // (undocumented)
-    rootMargin?: RefTyped<string> | string;
-    // (undocumented)
-    threshold?: RefTyped<number | number[]> | number | number[];
+  // (undocumented)
+  root?: RefTyped<Element> | null;
+  // (undocumented)
+  rootMargin?: RefTyped<string> | string;
+  // (undocumented)
+  threshold?: RefTyped<number | number[]> | number | number[];
 }
 
 // @public (undocumented)
 export interface IntersectionObserverResult {
-    // (undocumented)
-    disconnect: () => void;
-    // (undocumented)
-    elements: Ref<IntersectionObserverEntry[]>;
-    // (undocumented)
-    readonly isIntersecting: Ref<boolean>;
-    // (undocumented)
-    observe: (el: RefTyped<Element>) => void;
-    // (undocumented)
-    supported: boolean;
-    // (undocumented)
-    unobserve: (el: RefTyped<Element>) => void;
+  // (undocumented)
+  disconnect: () => void;
+  // (undocumented)
+  elements: Ref<IntersectionObserverEntry[]>;
+  // (undocumented)
+  readonly isIntersecting: Ref<boolean>;
+  // (undocumented)
+  observe: (el: RefTyped<Element>) => void;
+  // (undocumented)
+  supported: boolean;
+  // (undocumented)
+  unobserve: (el: RefTyped<Element>) => void;
 }
 
 // @public (undocumented)
 export interface LocalStorageReturn<T> {
-    clear: () => void;
-    remove: () => void;
-    setSync: (sync: boolean) => void;
-    // (undocumented)
-    storage: Ref<T>;
-    // (undocumented)
-    supported: boolean;
+  clear: () => void;
+  remove: () => void;
+  setSync: (sync: boolean) => void;
+  // (undocumented)
+  storage: Ref<T>;
+  // (undocumented)
+  supported: boolean;
 }
 
 // @public (undocumented)
@@ -92,112 +119,144 @@ export type LocalStorageTyped<T extends object> = string;
 
 // @public (undocumented)
 export interface MouseMoveResult {
-    // (undocumented)
-    mouseX: Ref<number>;
-    // (undocumented)
-    mouseY: Ref<number>;
-    // (undocumented)
-    remove: RemoveEventFunction;
+  // (undocumented)
+  mouseX: Ref<number>;
+  // (undocumented)
+  mouseY: Ref<number>;
+  // (undocumented)
+  remove: RemoveEventFunction;
 }
 
 // @public (undocumented)
 export interface NetworkInformation {
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationEventMap" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    addEventListener<K extends keyof NetworkInformationEventMap>(type: K, listener: (this: NetworkInformation, ev: NetworkInformationEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-    // (undocumented)
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-    // (undocumented)
-    readonly downlink: number;
-    // (undocumented)
-    readonly downlinkMax: number;
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationEffectiveType" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    readonly effectiveType: NetworkInformationEffectiveType;
-    // (undocumented)
-    onchange: (this: NetworkInformation, ev: Event) => void;
-    // (undocumented)
-    removeEventListener<K extends keyof NetworkInformationEventMap>(type: K, listener: (this: NetworkInformation, ev: NetworkInformationEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    // (undocumented)
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    // (undocumented)
-    readonly rtt: number;
-    // (undocumented)
-    readonly saveData: Boolean;
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationType" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    readonly type: NetworkInformationType;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationEventMap" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  addEventListener<K extends keyof NetworkInformationEventMap>(
+    type: K,
+    listener: (
+      this: NetworkInformation,
+      ev: NetworkInformationEventMap[K]
+    ) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  // (undocumented)
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  // (undocumented)
+  readonly downlink: number;
+  // (undocumented)
+  readonly downlinkMax: number;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationEffectiveType" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  readonly effectiveType: NetworkInformationEffectiveType;
+  // (undocumented)
+  onchange: (this: NetworkInformation, ev: Event) => void;
+  // (undocumented)
+  removeEventListener<K extends keyof NetworkInformationEventMap>(
+    type: K,
+    listener: (
+      this: NetworkInformation,
+      ev: NetworkInformationEventMap[K]
+    ) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+  // (undocumented)
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+  // (undocumented)
+  readonly rtt: number;
+  // (undocumented)
+  readonly saveData: Boolean;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationType" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  readonly type: NetworkInformationType;
 }
 
 // @public (undocumented)
-export function refShared<T = any>(defaultValue?: RefTyped<T>, id?: string): Ref<RefTyped<T>>;
+export function refShared<T = any>(
+  defaultValue?: RefTyped<T>,
+  id?: string
+): Ref<RefTyped<T>>;
 
 // @public (undocumented)
-export type RefSharedMessage<T = any> = RefSharedMessageInit | RefSharedMessageSync<T> | RefSharedMessageLeave | RefSharedMessageUpdate<T> | RefSharedMessageSetMind | RefSharedMessagePing | RefSharedMessagePong;
+export type RefSharedMessage<T = any> =
+  | RefSharedMessageInit
+  | RefSharedMessageSync<T>
+  | RefSharedMessageLeave
+  | RefSharedMessageUpdate<T>
+  | RefSharedMessageSetMind
+  | RefSharedMessagePing
+  | RefSharedMessagePong;
 
 // @public (undocumented)
 export type RefSharedMessageInit = {
-    type: RefSharedMessageType.INIT;
+  type: RefSharedMessageType.INIT;
 };
 
 // @public (undocumented)
 export type RefSharedMessageLeave = {
-    type: RefSharedMessageType.LEAVE;
-    id: number;
+  type: RefSharedMessageType.LEAVE;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessagePing = {
-    type: RefSharedMessageType.PING;
-    id: number;
+  type: RefSharedMessageType.PING;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessagePong = {
-    type: RefSharedMessageType.PONG;
-    id: number;
+  type: RefSharedMessageType.PONG;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessageSetMind = {
-    type: RefSharedMessageType.SET_MIND;
-    mind: SharedRefMind;
-    id: number;
+  type: RefSharedMessageType.SET_MIND;
+  mind: SharedRefMind;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessageSync<T> = {
-    type: RefSharedMessageType.SYNC;
-    value: T;
-    mind: SharedRefMind;
+  type: RefSharedMessageType.SYNC;
+  value: T;
+  mind: SharedRefMind;
 };
 
 // @public (undocumented)
 export const enum RefSharedMessageType {
-    // (undocumented)
-    INIT = 0,
-    // (undocumented)
-    LEAVE = 4,
-    // (undocumented)
-    PING = 5,
-    // (undocumented)
-    PONG = 6,
-    // (undocumented)
-    SET_MIND = 3,
-    // (undocumented)
-    SYNC = 1,
-    // (undocumented)
-    UPDATE = 2
+  // (undocumented)
+  INIT = 0,
+  // (undocumented)
+  LEAVE = 4,
+  // (undocumented)
+  PING = 5,
+  // (undocumented)
+  PONG = 6,
+  // (undocumented)
+  SET_MIND = 3,
+  // (undocumented)
+  SYNC = 1,
+  // (undocumented)
+  UPDATE = 2
 }
 
 // @public (undocumented)
 export type RefSharedMessageUpdate<T> = {
-    type: RefSharedMessageType.UPDATE;
-    value: T;
-    mind: SharedRefMind;
+  type: RefSharedMessageType.UPDATE;
+  value: T;
+  mind: SharedRefMind;
 };
 
 // @public (undocumented)
@@ -205,42 +264,53 @@ export type RemoveEventFunction = () => void;
 
 // @public (undocumented)
 export interface ResizeResult {
-    // (undocumented)
-    height: Ref<number>;
-    // (undocumented)
-    remove: RemoveEventFunction;
-    // (undocumented)
-    width: Ref<number>;
+  // (undocumented)
+  height: Ref<number>;
+  // (undocumented)
+  remove: RemoveEventFunction;
+  // (undocumented)
+  width: Ref<number>;
 }
 
 // @public (undocumented)
 export interface ScrollResult {
-    // (undocumented)
-    remove: RemoveEventFunction;
-    // (undocumented)
-    scrollLeft: Ref<number>;
-    // (undocumented)
-    scrollLeftTo: (x: number) => void;
-    // (undocumented)
-    scrollTo: Element["scrollTo"];
-    // (undocumented)
-    scrollTop: Ref<number>;
-    // (undocumented)
-    scrollTopTo: (y: number) => void;
+  // (undocumented)
+  remove: RemoveEventFunction;
+  // (undocumented)
+  scrollLeft: Ref<number>;
+  // (undocumented)
+  scrollLeftTo: (x: number) => void;
+  // (undocumented)
+  scrollTo: Element["scrollTo"];
+  // (undocumented)
+  scrollTop: Ref<number>;
+  // (undocumented)
+  scrollTopTo: (y: number) => void;
 }
 
 // @public (undocumented)
-export function setBreakpointTailwindCSS<T extends TailwindConfigEmpty>(tailwindConfig: T): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function setBreakpointTailwindCSS<T extends TailwindConfigEmpty>(
+  tailwindConfig: T
+): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function setBreakpointTailwindCSS<T extends BreakpointObject>(breakpoints: T): BreakpointReturn<T>;
+export function setBreakpointTailwindCSS<T extends BreakpointObject>(
+  breakpoints: T
+): BreakpointReturn<T>;
+
+// @public
+export function setVariableFor(
+  name: string,
+  value: CssVariable,
+  element?: HTMLElement
+): void;
 
 // @public (undocumented)
 export const enum SharedRefMind {
-    // (undocumented)
-    HIVE = 0,
-    // (undocumented)
-    MASTER = 1
+  // (undocumented)
+  HIVE = 0,
+  // (undocumented)
+  MASTER = 1
 }
 
 // @public (undocumented)
@@ -248,14 +318,16 @@ export function storageAvailable(storage?: Storage): boolean;
 
 // @public (undocumented)
 export interface StorageSerializer<T = any> {
-    // (undocumented)
-    parse(data: string): T;
-    // (undocumented)
-    stringify(item: T): string;
+  // (undocumented)
+  parse(data: string): T;
+  // (undocumented)
+  stringify(item: T): string;
 }
 
 // @public (undocumented)
-export function useBreakpoint<T extends BreakpointObject>(breakpoints: Record<keyof T, number | string>): BreakpointReturn<T>;
+export function useBreakpoint<T extends BreakpointObject>(
+  breakpoints: Record<keyof T, number | string>
+): BreakpointReturn<T>;
 
 // Warning: (ae-forgotten-export) The symbol "ChromeBreakpoint" needs to be exported by the entry point index.d.ts
 //
@@ -263,109 +335,190 @@ export function useBreakpoint<T extends BreakpointObject>(breakpoints: Record<ke
 export function useBreakpointChrome(): BreakpointReturn<ChromeBreakpoint>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(tailwindConfig: T): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(
+  tailwindConfig: T
+): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function useBreakpointTailwindCSS<
+  T extends TailwindConfigEmpty
+>(): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS(): BreakpointReturn<DefaultTailwindBreakpoints>;
+export function useBreakpointTailwindCSS(): BreakpointReturn<
+  DefaultTailwindBreakpoints
+>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends BreakpointObject>(): BreakpointReturn<T>;
+export function useBreakpointTailwindCSS<
+  T extends BreakpointObject
+>(): BreakpointReturn<T>;
 
 // @public (undocumented)
-export function useBroadcastChannel<T = any>(name: string, onBeforeClose?: Function): {
-    supported: boolean;
-    data: import("@vue/composition-api").Ref<T | null>;
-    messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errorEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errored: import("@vue/composition-api").Ref<boolean>;
-    isClosed: import("@vue/composition-api").Ref<boolean>;
-    send: (data: T) => void;
-    close: Function;
-    addListener: (cb: (ev: BroadcastMessageEvent<T>) => void, options?: boolean | AddEventListenerOptions | undefined) => void;
+export function useBroadcastChannel<T = any>(
+  name: string,
+  onBeforeClose?: Function
+): {
+  supported: boolean;
+  data: import("@vue/composition-api").Ref<T | null>;
+  messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errorEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errored: import("@vue/composition-api").Ref<boolean>;
+  isClosed: import("@vue/composition-api").Ref<boolean>;
+  send: (data: T) => void;
+  close: Function;
+  addListener: (
+    cb: (ev: BroadcastMessageEvent<T>) => void,
+    options?: boolean | AddEventListenerOptions | undefined
+  ) => void;
 };
 
-// @public (undocumented)
-export function useEvent<T extends {
-    addEventListener: (name: string, listener: EventListenerOrEventListenerObject) => any;
-    removeEventListener: Function;
-}, M, K extends keyof M>(el: RefTyped<T>, name: K, listener: (this: T, ev: M[K]) => any): RemoveEventFunction;
+// @public
+export type UseCssVariables<T> = CssVariableObject<T> & CssVariablesMethods;
 
 // @public (undocumented)
-export function useEvent<T extends {
-    addEventListener: (name: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => any;
-    removeEventListener: Function;
-}, M, K extends keyof M>(el: RefTyped<T>, name: K, listener: (this: T, ev: M[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
+export function useCssVariables<T extends CssVariableConfigurationObject>(
+  variables: Record<keyof T, string>,
+  element?: HTMLElement
+): UseCssVariables<T>;
 
 // @public (undocumented)
-export function useEvent<K extends keyof WindowEventMap>(el: RefTyped<Window>, name: K, listener: (this: Document, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
-
-// @public (undocumented)
-export function useEvent<K extends keyof DocumentEventMap>(el: RefTyped<Element>, name: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
-
-// @public (undocumented)
-export function useFetch<T = any>(options?: UseFetchOptions & Partial<RequestInfo>, requestInit?: RequestInit): {
-    cancel: (message?: string | undefined) => void;
-    isCancelled: import("@vue/composition-api").Ref<boolean>;
-    cancelledMessage: import("@vue/composition-api").Ref<string | undefined>;
-    text: import("@vue/composition-api").Ref<string>;
-    blob: import("@vue/composition-api").Ref<Blob | undefined>;
-    json: import("@vue/composition-api").Ref<T | null>;
-    jsonError: import("@vue/composition-api").Ref<any>;
-    status: Readonly<import("@vue/composition-api").Ref<number | null>>;
-    statusText: Readonly<import("@vue/composition-api").Ref<string | null>>;
-    exec: (request: RequestInfo, init?: RequestInit | undefined) => Promise<Response | undefined>;
-    promise: import("@vue/composition-api").Ref<Promise<Response> | undefined>; /**
-     * @description if the value is `true` it will parse the `json` before resolving the promise
-     * @default true
-     */
-    result: import("@vue/composition-api").Ref<Response | null>;
-    loading: import("@vue/composition-api").Ref<boolean>;
-    error: import("@vue/composition-api").Ref<any>;
+export function useEvent<
+  T extends {
+    addEventListener: (
+      name: string,
+      listener: EventListenerOrEventListenerObject
+    ) => any;
+    removeEventListener: Function;
+  },
+  M,
+  K extends keyof M
+>(
+  el: RefTyped<T>,
+  name: K,
+  listener: (this: T, ev: M[K]) => any
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<
+  T extends {
+    addEventListener: (
+      name: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions
+    ) => any;
+    removeEventListener: Function;
+  },
+  M,
+  K extends keyof M
+>(
+  el: RefTyped<T>,
+  name: K,
+  listener: (this: T, ev: M[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<K extends keyof WindowEventMap>(
+  el: RefTyped<Window>,
+  name: K,
+  listener: (this: Document, ev: WindowEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<K extends keyof DocumentEventMap>(
+  el: RefTyped<Element>,
+  name: K,
+  listener: (this: Document, ev: DocumentEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useFetch<T = any>(
+  options?: UseFetchOptions & Partial<RequestInfo>,
+  requestInit?: RequestInit
+): {
+  cancel: (message?: string | undefined) => void;
+  isCancelled: import("@vue/composition-api").Ref<boolean>;
+  cancelledMessage: import("@vue/composition-api").Ref<string | undefined>;
+  text: import("@vue/composition-api").Ref<string>;
+  blob: import("@vue/composition-api").Ref<Blob | undefined>;
+  json: import("@vue/composition-api").Ref<T | null>;
+  jsonError: import("@vue/composition-api").Ref<any>;
+  status: Readonly<import("@vue/composition-api").Ref<number | null>>;
+  statusText: Readonly<import("@vue/composition-api").Ref<string | null>>;
+  exec: (
+    request: RequestInfo,
+    init?: RequestInit | undefined
+  ) => Promise<Response | undefined>;
+  promise: import("@vue/composition-api").Ref<Promise<Response> | undefined>
+  /**
+   * @description if the value is `true` it will parse the `json` before resolving the promise
+   * @default true
+   */;
+  result: import("@vue/composition-api").Ref<Response | null>;
+  loading: import("@vue/composition-api").Ref<boolean>;
+  error: import("@vue/composition-api").Ref<any>;
 };
 
 // @public (undocumented)
 export interface UseFetchOptions {
-    isJson?: boolean;
-    parseImmediate?: boolean;
+  isJson?: boolean;
+  parseImmediate?: boolean;
 }
 
 // @public (undocumented)
-export function useGeolocation(options?: PositionOptions & GeolocationOptions): {
-    supported: boolean;
-    refresh: () => void;
-    error: import("@vue/composition-api").Ref<PositionError | null>;
-    timestamp: import("@vue/composition-api").Ref<number | null>;
-    coords: import("@vue/composition-api").Ref<Coordinates | null>;
-    highAccuracy: import("@vue/composition-api").Ref<boolean>;
+export function useGeolocation(
+  options?: PositionOptions & GeolocationOptions
+): {
+  supported: boolean;
+  refresh: () => void;
+  error: import("@vue/composition-api").Ref<PositionError | null>;
+  timestamp: import("@vue/composition-api").Ref<number | null>;
+  coords: import("@vue/composition-api").Ref<Coordinates | null>;
+  highAccuracy: import("@vue/composition-api").Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useIntersectionObserver(el: RefElement, options?: RefTyped<IntersectionObserverOptions>): IntersectionObserverResult;
+export function useIntersectionObserver(
+  el: RefElement,
+  options?: RefTyped<IntersectionObserverOptions>
+): IntersectionObserverResult;
 
 // @public (undocumented)
-export function useIntersectionObserver(options: RefTyped<IntersectionObserverOptions>): IntersectionObserverResult;
+export function useIntersectionObserver(
+  options: RefTyped<IntersectionObserverOptions>
+): IntersectionObserverResult;
 
 // @public (undocumented)
 export function useLanguage(): {
-    language: Ref<String>;
-    languages: Ref<readonly String[]>;
+  language: Ref<String>;
+  languages: Ref<readonly String[]>;
 };
 
 // @public (undocumented)
-export function useLocalStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
+export function useLocalStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
 
 // @public (undocumented)
-export function useLocalStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
+export function useLocalStorage<T extends object = any>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
 
 // @public (undocumented)
-export function useMatchMedia(query: string): {
-    supported: boolean;
-    mediaQueryList: Ref<MediaQueryList>;
-    matches: Ref<boolean>;
-    remove: () => void;
+export function useMatchMedia(
+  query: string
+): {
+  supported: boolean;
+  mediaQueryList: Ref<MediaQueryList>;
+  matches: Ref<boolean>;
+  remove: () => void;
 };
 
 // Warning: (ae-forgotten-export) The symbol "NetworkInformationReturn" needs to be exported by the entry point index.d.ts
@@ -375,33 +528,52 @@ export function useNetworkInformation(): NetworkInformationReturn;
 
 // @public (undocumented)
 export function useOnline(): {
-    supported: boolean;
-    online: Ref<boolean>;
+  supported: boolean;
+  online: Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefTyped<Window>, wait: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefTyped<Window>,
+  wait: number
+): MouseMoveResult;
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): MouseMoveResult;
 
 // @public (undocumented)
 export function useOnMouseMove(el: RefElement, wait: number): MouseMoveResult;
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): MouseMoveResult;
 
 // @public (undocumented)
 export function useOnResize(el: RefTyped<Window>, wait: number): ResizeResult;
 
 // @public (undocumented)
-export function useOnResize(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): ResizeResult;
+export function useOnResize(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ResizeResult;
 
 // @public (undocumented)
 export function useOnResize(el: RefElement, wait: number): ResizeResult;
 
 // @public (undocumented)
-export function useOnResize(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): ResizeResult;
+export function useOnResize(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ResizeResult;
 
 // @public (undocumented)
 export function useOnScroll(): ScrollResult;
@@ -410,99 +582,139 @@ export function useOnScroll(): ScrollResult;
 export function useOnScroll(wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(options: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  options: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function useOnScroll(el: RefTyped<Window>, wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function useOnScroll(el: RefElement, wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function usePageVisibility(): {
-    visibility: Ref<VisibilityState>;
-    hidden: Ref<boolean>;
+  visibility: Ref<VisibilityState>;
+  hidden: Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useSessionStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useSessionStorage<T extends object = object>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
-
-// @public (undocumented)
-export function useSharedRef<T = any>(name: string, defaultValue?: T): {
-    supported: boolean;
-    id: number;
-    data: Ref<T>;
-    master: Ref<boolean>;
-    mind: Ref<SharedRefMind>;
-    editable: Readonly<Ref<boolean>>;
-    targets: Ref<number[]>;
-    ping: () => void;
-    setMind: (t: SharedRefMind) => void;
-    addListener: (cb: (ev: BroadcastMessageEvent<RefSharedMessage<T>>) => void, options?: boolean | AddEventListenerOptions | undefined) => void;
+export function useSessionStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
+
+// @public (undocumented)
+export function useSessionStorage<T extends object = object>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
+
+// @public (undocumented)
+export function useSharedRef<T = any>(
+  name: string,
+  defaultValue?: T
+): {
+  supported: boolean;
+  id: number;
+  data: Ref<T>;
+  master: Ref<boolean>;
+  mind: Ref<SharedRefMind>;
+  editable: Readonly<Ref<boolean>>;
+  targets: Ref<number[]>;
+  ping: () => void;
+  setMind: (t: SharedRefMind) => void;
+  addListener: (
+    cb: (ev: BroadcastMessageEvent<RefSharedMessage<T>>) => void,
+    options?: boolean | AddEventListenerOptions | undefined
+  ) => void;
 };
 
 // @public (undocumented)
-export function useStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
-
-// @public (undocumented)
-export function useWebSocket(url: string, protocols?: string | string[]): {
-    supported: boolean;
-    ws: WebSocket | null;
-    send: (data: string | ArrayBuffer | SharedArrayBuffer | Blob | ArrayBufferView) => void;
-    close: (code?: number | undefined, reason?: string | undefined) => void;
-    messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
-    data: import("@vue/composition-api").Ref<any>;
-    isOpen: import("@vue/composition-api").Ref<boolean>;
-    isClosed: import("@vue/composition-api").Ref<boolean>;
-    errored: import("@vue/composition-api").Ref<boolean>;
+export function useStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
+
+// @public (undocumented)
+export function useStorage<T extends object = any>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
+
+// @public (undocumented)
+export function useWebSocket(
+  url: string,
+  protocols?: string | string[]
+): {
+  supported: boolean;
+  ws: WebSocket | null;
+  send: (
+    data: string | ArrayBuffer | SharedArrayBuffer | Blob | ArrayBufferView
+  ) => void;
+  close: (code?: number | undefined, reason?: string | undefined) => void;
+  messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
+  data: import("@vue/composition-api").Ref<any>;
+  isOpen: import("@vue/composition-api").Ref<boolean>;
+  isClosed: import("@vue/composition-api").Ref<boolean>;
+  errored: import("@vue/composition-api").Ref<boolean>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "WebStorageType" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function useWebStorage(type: WebStorageType, serializer?: StorageSerializer, ms?: number): {
-    supported: boolean;
-    quotaError: Ref<boolean>;
-    store: WebStorage;
-    remove: () => boolean;
+export function useWebStorage(
+  type: WebStorageType,
+  serializer?: StorageSerializer,
+  ms?: number
+): {
+  supported: boolean;
+  quotaError: Ref<boolean>;
+  store: WebStorage;
+  remove: () => boolean;
 };
 
 // @public (undocumented)
 export interface WebStorage {
-    // (undocumented)
-    $quotaError: Ref<boolean>;
-    // (undocumented)
-    $refMap: Map<string, Ref<any>>;
-    // (undocumented)
-    $syncKeys: Record<string, boolean>;
-    // (undocumented)
-    $watchHandlers: Map<string, Function>;
-    clear(): void;
-    getItem<T = any>(key: string): Ref<T> | null;
-    key(index: number): string | null;
-    readonly length: number;
-    removeItem(key: string): void;
-    setItem<T>(key: string, value: T): Ref<T>;
-    // (undocumented)
-    setSync(key: string, sync: boolean): void;
-    // (undocumented)
-    updateItem(key: string, value: string): void;
+  // (undocumented)
+  $quotaError: Ref<boolean>;
+  // (undocumented)
+  $refMap: Map<string, Ref<any>>;
+  // (undocumented)
+  $syncKeys: Record<string, boolean>;
+  // (undocumented)
+  $watchHandlers: Map<string, Function>;
+  clear(): void;
+  getItem<T = any>(key: string): Ref<T> | null;
+  key(index: number): string | null;
+  readonly length: number;
+  removeItem(key: string): void;
+  setItem<T>(key: string, value: T): Ref<T>;
+  // (undocumented)
+  setSync(key: string, sync: boolean): void;
+  // (undocumented)
+  updateItem(key: string, value: string): void;
 }
 
-
 // (No @packageDocumentation comment for this package)
-
 ```
diff --git a/docs/composable/web/cssVariables.md b/docs/composable/web/cssVariables.md
new file mode 100644
index 000000000..109d6ea7d
--- /dev/null
+++ b/docs/composable/web/cssVariables.md
@@ -0,0 +1,127 @@
+# CSS variables
+
+Expose the CSS variables of your choice to reactive properties.
+
+## State
+
+The `useCssVariables` function exposes the following reactive states:
+
+```js
+import { useCssVariables } from "vue-composable";
+
+const { listening, backgroundColor, onBackgroundColor } = useCssVariables({
+  backgroundColor: "color-background",
+  onBackgroundColor: "color-on-background"
+});
+
+// backgroundColor contains the `--color-background` CSS variable
+// onBackgroundColor contains the `--color-on-background` CSS variable
+// listening is true
+```
+
+| State     | Type      | Description                                                                 |
+| --------- | --------- | --------------------------------------------------------------------------- |
+| listening | `Boolean` | A value that indicates if the observer is listening to CSS variable changes |
+| ...args   | `Args`    | Object with the same keys but with reactive CSS variable value              |
+
+## Methods
+
+The `useCssVariables` function exposes the following methods:
+
+```js
+import { useCssVariables } from "vue-composable";
+
+const { get, set, resume, start } = useCssVariables();
+
+// Sets the `--color-background` variable value
+// You don't need the dashed before the variable name.
+set("color-background", "red");
+
+// Gets the `--color-background` variable value
+// The result is not reactive, and you don't need the leading dashes
+const backgroundColor = get("color-background"); // red
+```
+
+| Signature | Description                                                 | Arguments                                                                                     |
+| --------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `get`     | Manually gets the given CSS variable from the given element | `variableName: string, element: HTMLElement = document.documentElement`                       |
+| `set`     | Manually sets a CSS variable to the given element           | `variableName: string, value: string | null, element: HTMLElement = document.documentElement` |
+| `stop`    | Stops observing the changes                                 |                                                                                               |
+| `resume`  | Start observing the changes again                           |                                                                                               |
+
+## Example
+
+<css-variables-example/>
+
+### Code
+
+```vue
+<template>
+  <div>
+    <div>
+      <label for="foreground-value"
+        >Override the value for <code>--color-foreground</code>:</label
+      >
+      <input
+        type="text"
+        id="foreground-value"
+        @input="set('color-foreground', $event.target.value)"
+        :model="foreground"
+      />
+    </div>
+
+    <div class="text" style="color: var(--color-foreground)">
+      <span v-if="listening">
+        I am a text with the following color:
+      </span>
+      <span v-else>
+        My color will be updated but not my label:
+      </span>
+      {{ foreground }}
+    </div>
+
+    <div>
+      <button type="button" @click="stop()" :disabled="!listening">
+        Stop listening
+      </button>
+      <button type="button" @click="resume()" :disabled="listening">
+        Resume listening
+      </button>
+      <button
+        type="button"
+        @click="foreground = get('color-foreground')"
+        :disabled="listening"
+      >
+        Manual label update
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useCssVariables } from "vue-composable";
+import { ref } from "@vue/composition-api";
+
+export default {
+  name: "css-variables-example",
+  setup() {
+    const { stop, resume, get, set, listening, foreground } = useCssVariables({
+      foreground: "color-foreground"
+    });
+
+    set("color-foreground", "red");
+
+    return {
+      listening,
+      stop,
+      resume,
+      get,
+      set,
+      listening,
+      foreground,
+      document
+    };
+  }
+};
+</script>
+```
diff --git a/packages/vue-composable/README.md b/packages/vue-composable/README.md
index bf20fb8c8..1d7707ee2 100644
--- a/packages/vue-composable/README.md
+++ b/packages/vue-composable/README.md
@@ -103,6 +103,7 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
+- [CSS variables](https://pikax.me/vue-composable/composable/web/cssVariables) - reactive `CSS variables`
 
 ### External
 
diff --git a/packages/web/README.md b/packages/web/README.md
index b7dca87e4..d8233fb48 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -61,6 +61,7 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
+- [CSS variables](https://pikax.me/vue-composable/composable/web/cssVariables) - reactive `CSS variables`
 
 ## Contributing
 
diff --git a/packages/web/__tests__/web/cssVariables.spec.ts b/packages/web/__tests__/web/cssVariables.spec.ts
new file mode 100644
index 000000000..49d5aefaf
--- /dev/null
+++ b/packages/web/__tests__/web/cssVariables.spec.ts
@@ -0,0 +1,191 @@
+import {
+  getVariableFor,
+  setVariableFor,
+  useCssVariables,
+  UseCssVariables
+} from "../../src";
+import { Vue } from "../utils";
+
+describe("CSS variables", () => {
+  let callback: () => void;
+  const _mutationObserver = window.MutationObserver;
+  const observeFn = jest.fn().mockImplementation(() => {
+    callback();
+  });
+  const disconnectFn = jest.fn();
+  const constructorFn = jest.fn();
+
+  beforeAll(() => {
+    class MutationObserver {
+      constructor(...args: any[]) {
+        constructorFn(...args);
+        callback = args[0];
+      }
+      observe = observeFn;
+      disconnect = disconnectFn;
+    }
+    Object.defineProperty(window, "MutationObserver", {
+      writable: true,
+      configurable: true,
+      value: MutationObserver
+    });
+    Object.defineProperty(global, "MutationObserver", {
+      writable: true,
+      configurable: true,
+      value: MutationObserver
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, "MutationObserver", {
+      writable: true,
+      configurable: true,
+      value: _mutationObserver
+    });
+    Object.defineProperty(global, "MutationObserver", {
+      writable: true,
+      configurable: true,
+      value: _mutationObserver
+    });
+  });
+
+  beforeEach(() => {
+    observeFn.mockClear();
+    constructorFn.mockReset();
+    disconnectFn.mockReset();
+  });
+
+  it("should retrieve the correct value for a defined CSS variable", async () => {
+    const element = document.createElement("div");
+    element.style.setProperty("--variable-name", "#fff");
+
+    const definedVariable = getVariableFor("variable-name", element);
+    expect(definedVariable).toBe("#fff");
+
+    const undefinedVariable = getVariableFor("undefined-variable", element);
+    expect(undefinedVariable).toBeNull();
+  });
+
+  it("should retrieve the correct value for an undefined CSS variable", async () => {
+    const element = document.createElement("div");
+    const undefinedVariable = getVariableFor("undefined-variable", element);
+    expect(undefinedVariable).toBeNull();
+  });
+
+  it("should set the value of a CSS variable on an element", async () => {
+    const element = document.createElement("div");
+
+    setVariableFor("variable-name", "#fff", element);
+
+    expect(element.style.getPropertyValue("--variable-name")).toBe("#fff");
+  });
+
+  it("should know if the observer is no longer listening", async () => {
+    let variables: UseCssVariables<Record<string, string>> = {} as any;
+
+    new Vue({
+      template: "<div></div>",
+      setup() {
+        variables = useCssVariables({});
+      }
+    }).$mount();
+
+    let { listening, stop, resume } = variables;
+
+    expect(listening).toMatchObject({
+      value: true
+    });
+
+    stop();
+
+    expect(listening).toMatchObject({
+      value: false
+    });
+
+    resume();
+
+    expect(listening).toMatchObject({
+      value: true
+    });
+  });
+
+  it("should automatically start the observer and stops it on destroy", async () => {
+    const vm = new Vue({
+      template: "<div></div>",
+      setup() {
+        useCssVariables({
+          test: "variable-name"
+        });
+      }
+    });
+
+    vm.$mount();
+
+    expect(observeFn).toHaveBeenCalledTimes(1);
+    expect(disconnectFn).toHaveBeenCalledTimes(0);
+
+    vm.$destroy();
+
+    expect(observeFn).toHaveBeenCalledTimes(1);
+    expect(disconnectFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should update properties thanks to the observer", async () => {
+    const element = document.createElement("div");
+    let variables: UseCssVariables<Record<string, string>> = {} as any;
+
+    new Vue({
+      template: "<div></div>",
+      setup() {
+        variables = useCssVariables(
+          {
+            test: "variable-name"
+          },
+          element
+        );
+      }
+    }).$mount();
+
+    callback = () => {
+      variables.test.value = getVariableFor("variable-name", element);
+    };
+
+    expect(variables.test.value).toBeNull();
+
+    // Simulate an observation
+    setVariableFor("variable-name", "red", element);
+    callback();
+
+    expect(variables.test.value).toBe("red");
+  });
+
+  it("remembers bound element", async () => {
+    const element = document.createElement("div");
+    element.style.setProperty("--dummy-name", "red");
+    let variables: UseCssVariables<Record<string, string>> = {} as any;
+
+    new Vue({
+      template: "<div></div>",
+      setup() {
+        variables = useCssVariables({}, element);
+      }
+    }).$mount();
+
+    let { get, set } = variables;
+
+    // `get` should be bound to element
+    expect(get("dummy-name")).toBe("red");
+
+    // `set` should be bound to element
+    set("dummy-name", "blue");
+
+    // We check directly from the element to be sure
+    expect(element.style.getPropertyValue("--dummy-name")).toBe("blue");
+
+    // We set that variable to another element
+    set("dummy-name", "green", document.documentElement);
+
+    // Bound element should not have changed
+    expect(element.style.getPropertyValue("--dummy-name")).toBe("blue");
+  });
+});
diff --git a/packages/web/src/web/cssVariables.ts b/packages/web/src/web/cssVariables.ts
new file mode 100644
index 000000000..f41c19f3f
--- /dev/null
+++ b/packages/web/src/web/cssVariables.ts
@@ -0,0 +1,152 @@
+import { Ref, ref, onUnmounted } from "@vue/composition-api";
+
+/**
+ * The values a CSS variable can contain.
+ */
+export type CssVariable = string | null;
+
+/**
+ * Additional methods.
+ */
+export interface CssVariablesMethods {
+  /**
+   * Stops the observation.
+   */
+  stop: () => void;
+
+  /**
+   * Resumes the observation.
+   */
+  resume: () => void;
+
+  /**
+   * Gets the current value of the given CSS variable name for the given element.
+   *
+   * @param name The CSS variable name.
+   * @param element The element to get the variable for.
+   */
+  get: (name: string, el?: HTMLElement) => CssVariable;
+
+  /**
+   * Sets the value of the given CSS variable for the given element.
+   *
+   * @param name The CSS variable name without dashes.
+   * @param value The CSS variable value.
+   * @param element The element to set the variable for.
+   */
+  set: (name: string, value: CssVariable, el?: HTMLElement) => void;
+}
+
+/**
+ * Returns object. Consists of multiple pairs of key/CSS variable value references and the additional methods.
+ */
+export type UseCssVariables<T> = CssVariableObject<T> & CssVariablesMethods;
+
+/**
+ * The CSS variable return object. Each value is a `Ref` of a CSS variable's contents.
+ */
+export type CssVariableObject<T> = Record<keyof T, Ref<CssVariable>>;
+
+/**
+ * A CSS Variable configuration object. Each value must be a CSS variable without the leading dashes.
+ */
+export type CssVariableConfigurationObject = Record<string, string>;
+
+/**
+ * Gets the current value of the given CSS variable name for the given element.
+ *
+ * @param element The element to get the variable for.
+ * @param name The CSS variable name.
+ */
+export function getVariableFor(
+  name: string,
+  element: HTMLElement = document.documentElement
+): CssVariable {
+  const result = getComputedStyle(element).getPropertyValue(`--${name}`);
+  return result ? result.trim() : null;
+}
+
+/**
+ * Sets the value of the given CSS variable for the given element.
+ *
+ * @param element The element to set the variable for.
+ * @param name The CSS variable name without dashes.
+ * @param value The CSS variable value.
+ */
+export function setVariableFor(
+  name: string,
+  value: CssVariable,
+  element: HTMLElement = document.documentElement
+): void {
+  element.style.setProperty(`--${name}`, value);
+}
+
+/**
+ *
+ * @param variables
+ * @param element
+ */
+export function useCssVariables<T extends CssVariableConfigurationObject>(
+  variables: Record<keyof T, string>,
+  element: HTMLElement = document.documentElement
+): UseCssVariables<T> {
+  // Reactive property to tell if the observer is listening
+  const listening = ref(true);
+
+  // Stores the results by reference.
+  const result: CssVariableObject<T> = {} as any;
+
+  // Assign variables to the result record.
+  for (const key in variables) {
+    result[key] = ref<CssVariable>(null);
+  }
+
+  // Sets up the observer.
+  const observer = new MutationObserver(() => {
+    // Each time an observation has been made,
+    // we look up for each CSS variable and update their values.
+    for (const key in variables) {
+      result[key].value = getVariableFor(variables[key], element);
+    }
+  });
+
+  // Sets the `stop` method.
+  const stop = () => {
+    observer.disconnect();
+    listening.value = false;
+  };
+
+  // Sets the `start` method.
+  const start = () => {
+    observer.observe(element, {
+      attributes: true,
+      childList: true
+    });
+    listening.value = true;
+  };
+
+  // Starts observing
+  start();
+
+  // Stops on destroy
+  onUnmounted(() => stop());
+
+  // Sets the `get` method
+  const get = (name: string, el?: HTMLElement) => {
+    return getVariableFor(name, el || element);
+  };
+
+  // Sets the `set` method
+  const set = (name: string, value: CssVariable, el?: HTMLElement) => {
+    return setVariableFor(name, value, el || element);
+  };
+
+  return {
+    ...result,
+    get,
+    set,
+    resume: start,
+    stop,
+    listening
+  };
+}
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
index 02aa86f50..17482bf13 100644
--- a/packages/web/src/web/index.ts
+++ b/packages/web/src/web/index.ts
@@ -7,3 +7,4 @@ export * from "./pageVisibility";
 export * from "./language";
 export * from "./broadcastChannel";
 export * from "./geolocation";
+export * from "./cssVariables";
diff --git a/readme.md b/readme.md
index 98a867d2f..5e1425671 100644
--- a/readme.md
+++ b/readme.md
@@ -105,6 +105,7 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
+- [CSS variables](https://pikax.me/vue-composable/composable/web/cssVariables) - reactive `CSS variables`
 
 ### External