Theme Provider

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download theme-provider -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { ThemeProvider } from "@/components/ui/theme-provider";
import { Button } from "@/components/ui/button";
import { useTheme } from "@/components/ui/theme-provider";

const ThemeStatus = {
  components: { Button },
  setup: () => useTheme(),
  template:
    '<div class="space-y-4 rounded-lg border p-6"><p role="status">Provider theme: {{ theme }}</p><Button>Theme example</Button></div>',
};

const args = {
  "defaultTheme": "system",
} satisfies Partial<
  InstanceType<typeof ThemeProvider> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { defaultTheme?: "light" | "dark" | "system" };
const storageKey = `theme-example-${crypto.randomUUID()}`;
</script>

<template>
  <ThemeProvider
    :key="args.defaultTheme"
    :default-theme="args.defaultTheme"
    :storage-key="storageKey"
    ><ThemeStatus
  /></ThemeProvider>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.