From 9d02c364072d87b9e58c0839f9ea0e0b2d3aaca6 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 17 Aug 2025 21:29:15 -0500
Subject: [PATCH] docs: add support for toggling theme

---
 apps/docs/src/App.vue                        |  6 ++++
 apps/docs/src/components/app/AppBar.vue      | 15 +++++++++-
 apps/docs/src/components/app/AppDivider.vue  |  8 +++++-
 apps/docs/src/components/app/AppMain.vue     |  1 +
 apps/docs/src/components/app/AppNav.vue      | 13 +++++++--
 apps/docs/src/plugins/icons.ts               |  2 ++
 apps/docs/src/plugins/zero.ts                | 30 ++++++++++----------
 packages/0/src/composables/useTheme/index.ts |  2 +-
 playground/src/composables.d.ts              |  7 ++++-
 9 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
index d1207579..8d32da76 100644
--- a/apps/docs/src/App.vue
+++ b/apps/docs/src/App.vue
@@ -19,6 +19,12 @@
 <style>
   #app > div {
     background-color: var(--v0-background);
+    color: var(--v0-text);
+  }
+
+  .bg-surface-tint {
+    background-color: var(--v0-surfaceTint);
+    color: var(--v0-text);
   }
 
   .markdown-body {
diff --git a/apps/docs/src/components/app/AppBar.vue b/apps/docs/src/components/app/AppBar.vue
index 7b8e2b03..87ccc1b9 100644
--- a/apps/docs/src/components/app/AppBar.vue
+++ b/apps/docs/src/components/app/AppBar.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useTheme } from '@vuetify/v0'
 
   // Composables
   import { useAppContext } from '@/composables/useApp'
 
+  // Utilities
+  import { toRef } from 'vue'
+
   // Types
   import type { AtomProps } from '@vuetify/v0'
 
@@ -12,6 +15,9 @@
 
   const breakpoints = useBreakpoints()
   const app = useAppContext()
+  const theme = useTheme()
+
+  const icon = toRef(() => theme.selectedItem.value?.dark ? 'dark' : 'light')
 </script>
 
 <template>
@@ -47,6 +53,13 @@
       >
         <AppIcon icon="github" />
       </a>
+
+      <button
+        class="pa-1 inline-flex rounded cursor-pointer bg-surface-tint"
+        @click="theme.cycle(['light', 'dark'])"
+      >
+        <AppIcon :icon />
+      </button>
     </div>
   </Atom>
 </template>
diff --git a/apps/docs/src/components/app/AppDivider.vue b/apps/docs/src/components/app/AppDivider.vue
index e7d87573..2f929324 100644
--- a/apps/docs/src/components/app/AppDivider.vue
+++ b/apps/docs/src/components/app/AppDivider.vue
@@ -13,7 +13,13 @@
 <template>
   <Atom
     :as
-    class="border-none bg-black opacity-10"
+    class="app-divider border-none"
     :class="[orientation === 'horizontal' ? 'w-full h-px my-2' : 'w-px h-full mx-2']"
   />
 </template>
+
+<style scoped>
+  .app-divider {
+    background-color: var(--v0-divider);
+  }
+</style>
diff --git a/apps/docs/src/components/app/AppMain.vue b/apps/docs/src/components/app/AppMain.vue
index 4e6937d6..509e07d5 100644
--- a/apps/docs/src/components/app/AppMain.vue
+++ b/apps/docs/src/components/app/AppMain.vue
@@ -8,6 +8,7 @@
   <div
     class="pa-4 mt-[72px] transition-margin duration-200 ease-in-out"
     :class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+    style="min-height: calc(100vh - 96px)"
   >
     <router-view />
   </div>
diff --git a/apps/docs/src/components/app/AppNav.vue b/apps/docs/src/components/app/AppNav.vue
index 8c4682e7..a71e28f6 100644
--- a/apps/docs/src/components/app/AppNav.vue
+++ b/apps/docs/src/components/app/AppNav.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import { Atom, useBreakpoints } from '@vuetify/v0'
+  import { Atom, useBreakpoints, useTheme } from '@vuetify/v0'
   import { useAppContext } from '@/composables/useApp'
   import { useRoute } from 'vue-router'
-  import { watch } from 'vue'
+  import { toRef, watch } from 'vue'
   import type { AtomProps } from '@vuetify/v0'
 
   const { as = 'nav' } = defineProps<AtomProps>()
@@ -114,6 +114,13 @@
   const breakpoints = useBreakpoints()
   const app = useAppContext()
   const route = useRoute()
+  const theme = useTheme()
+
+  const src = toRef(() => {
+    return theme.selectedId.value === 'dark'
+      ? 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-dark.png'
+      : 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.png'
+  })
 
   watch(route, () => {
     if (app.nav.value && breakpoints.isMobile) {
@@ -135,7 +142,7 @@
       alt="Vuetify0 Logo"
       decoding="async"
       fetchpriority="high"
-      src="https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.png"
+      :src
     >
 
     <ul class="flex gap-2 flex-col">
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 97bea7ff..7e5020af 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/apps/docs/src/plugins/icons.ts
@@ -15,6 +15,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
   close: 'M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z',
   alert: 'M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2',
   vuetify: 'M4.21042 8.37865L4.00090 8.00000L0.00000 0.80000H8.42088L4.21042 8.37865ZM4.97928 9.76072L8.00000 15.20000L16.00000 0.80000H9.95672L4.97928 9.76072Z',
+  light: 'M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708',
+  dark: 'M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286',
 })
 
 export function createIconPlugin () {
diff --git a/apps/docs/src/plugins/zero.ts b/apps/docs/src/plugins/zero.ts
index a557c607..2ea2ab12 100644
--- a/apps/docs/src/plugins/zero.ts
+++ b/apps/docs/src/plugins/zero.ts
@@ -21,7 +21,6 @@ export default function zero (app: App) {
           colors: {
             primary: '#3b82f6',
             secondary: '#64748b',
-            accent: '#6366f1',
             error: '#ef4444',
             info: '#0ea5e9',
             success: '#22c55e',
@@ -30,26 +29,27 @@ export default function zero (app: App) {
             surface: '#FFFFFF',
             surfaceTint: '#ececec',
             surfaceVariant: '#212121',
-            divider: '#eeeeee',
+            divider: '#0000001F',
             pre: '#fafafa',
+            text: '#212121',
           },
         },
         dark: {
           dark: true,
           colors: {
-            primary: '#675496',
-            secondary: '#5d5d72',
-            accent: '#86468c',
-            error: '#ba1a1a',
-            info: '#0066b3',
-            success: '#006d3b',
-            warning: '#b25c00',
-            background: '#FFFFFF',
-            surface: '#FFFFFF',
-            surfaceTint: '#ded8e0',
-            surfaceVariant: '#322f35',
-            divider: '#7a757f',
-            pre: '#f8f2fa',
+            primary: '#2196F3',
+            secondary: '#54B6B2',
+            error: '#CF6679',
+            info: '#2196F3',
+            success: '#4CAF50',
+            warning: '#FB8C00',
+            background: '#121212',
+            surface: '#212121',
+            surfaceTint: '#424242',
+            surfaceVariant: '#c8c8c8',
+            divider: '#FFFFFF1F',
+            pre: '#212121',
+            text: '#FFFFFF',
           },
         },
       },
diff --git a/packages/0/src/composables/useTheme/index.ts b/packages/0/src/composables/useTheme/index.ts
index e940601f..c070c862 100644
--- a/packages/0/src/composables/useTheme/index.ts
+++ b/packages/0/src/composables/useTheme/index.ts
@@ -47,7 +47,7 @@ export type ThemeTicket = SingleTicket & {
 
 export interface ThemeContext<Z extends ThemeTicket> extends SingleContext<Z> {
   colors: ComputedRef<Record<string, Colors>>
-  cycle: (themes: ID[]) => void
+  cycle: (themes?: ID[]) => void
 }
 
 export interface ThemeOptions extends ThemePluginOptions {}
diff --git a/playground/src/composables.d.ts b/playground/src/composables.d.ts
index c709d4f9..69de0a3b 100644
--- a/playground/src/composables.d.ts
+++ b/playground/src/composables.d.ts
@@ -118,6 +118,7 @@ declare global {
   const useElementSize: typeof import('../../packages/paper/src/composables/useResizeObserver/index')['useElementSize']
   const useElevation: typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']
   const useEventListener: typeof import('../../packages/0/src/composables/useEventListener/index')['useEventListener']
+  const useFilter: typeof import('../../packages/0/src/composables/useFilter/index')['useFilter']
   const useForm: typeof import('../../packages/0/src/composables/useForm/index')['useForm']
   const useGroup: typeof import('../../packages/0/src/composables/useGroup/index')['useGroup']
   const useHydration: typeof import('../../packages/0/src/composables/useHydration/index')['useHydration']
@@ -188,6 +189,9 @@ declare global {
   export type { CleanupFunction, EventHandler } from '../../packages/0/src/composables/useEventListener/index'
   import('../../packages/0/src/composables/useEventListener/index')
   // @ts-ignore
+  export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, UseFilterOptions, UseFilterResult } from '../../packages/0/src/composables/useFilter/index'
+  import('../../packages/0/src/composables/useFilter/index')
+  // @ts-ignore
   export type { FormValidationResult, FormValidationRule, FormValue, FormTicket, FormContext, FormOptions } from '../../packages/0/src/composables/useForm/index'
   import('../../packages/0/src/composables/useForm/index')
   // @ts-ignore
@@ -227,7 +231,7 @@ declare global {
   export type { StorageContext, StorageOptions, StoragePlugin } from '../../packages/0/src/composables/useStorage/index'
   import('../../packages/0/src/composables/useStorage/index')
   // @ts-ignore
-  export type { Colors, ThemeColors, ThemeTicket, ThemeContext, ThemeOptions, ThemePluginOptions, ThemePlugin } from '../../packages/0/src/composables/useTheme/index'
+  export type { Colors, ThemeColors, ThemeRecord, ThemeTicket, ThemeContext, ThemeOptions, ThemePluginOptions, ThemePlugin } from '../../packages/0/src/composables/useTheme/index'
   import('../../packages/0/src/composables/useTheme/index')
   // @ts-ignore
   export type { TokenAlias, TokenValue, TokenCollection, FlatTokenCollection, TokenTicket, TokenContext } from '../../packages/0/src/composables/useTokens/index'
@@ -354,6 +358,7 @@ declare module 'vue' {
     readonly useElementSize: UnwrapRef<typeof import('../../packages/paper/src/composables/useResizeObserver/index')['useElementSize']>
     readonly useElevation: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']>
     readonly useEventListener: UnwrapRef<typeof import('../../packages/0/src/composables/useEventListener/index')['useEventListener']>
+    readonly useFilter: UnwrapRef<typeof import('../../packages/0/src/composables/useFilter/index')['useFilter']>
     readonly useForm: UnwrapRef<typeof import('../../packages/0/src/composables/useForm/index')['useForm']>
     readonly useGroup: UnwrapRef<typeof import('../../packages/0/src/composables/useGroup/index')['useGroup']>
     readonly useHydration: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['useHydration']>