Vue 3

1<script setup>
2import { useTheme } from "@theme-kit/vue";
3const { theme, mode, family, setMode, setFamily, toggleTheme } = useTheme();
4</script>
5
6<template>
7  <button @click="toggleTheme">{{ theme.name }} · {{ mode }}</button>
8  <button @click="setMode('dark')">Dark</button>
9  <select v-model="family" @change="setFamily(family)">
10    <option value="neutral">Neutral</option>
11    <option value="mint">Mint</option>
12  </select>
13</template>

1<script setup>
2import { useThemeHistory, useThemeRuntime } from "@theme-kit/vue";
3const { undo, redo, canUndo, canRedo } = useThemeHistory();
4const runtime = useThemeRuntime();
5</script>
6
7<template>
8  <button :disabled="!canUndo" @click="undo">Undo</button>
9  <button :disabled="!canRedo" @click="redo">Redo</button>
10  <button @click="runtime.update({ colors: { primary: '#6366f1' } })">
11    Make primary indigo
12  </button>
13</template>

1<script setup>
2import { ThemeScope, type ThemeTransitionOptions } from "@theme-kit/vue";
3
4const transition: ThemeTransitionOptions = { duration: 300, easing: "ease" };
5</script>
6
7<template>
8  <Sidebar />
9  <ThemeScope theme="forest" :transition="transition">
10    <DataViz />
11  </ThemeScope>
12</template>

1<script setup>
2import { onMounted } from "vue";
3import { useThemeLifecycle, useThemePacks } from "@theme-kit/vue";
4
5const { on } = useThemeLifecycle();
6const usePack = useThemePacks();
7
8onMounted(() => {
9  on("beforeThemeChange", (e) => console.log("changed to", e.next.name));
10});
11</script>
12
13<template>
14  <button @click="usePack({ name: 'a11y', themes: highContrast })">
15    Apply High Contrast pack
16  </button>
17</template>

1<script setup>
2import { ThemeProvider } from "@theme-kit/vue";
3</script>
4
5<template>
6  <ThemeProvider
7    :themes="themes"
8    :transition="{ enabled: true, duration: 300, easing: 'ease-in-out' }"
9  >
10    <YourView />
11  </ThemeProvider>
12</template>