useCustomizer

Opens and closes the theme customizer. One ref, because the things that open it are scattered and the drawer is mounted once.

Open in demo

Import

import { useCustomizer } from '@shared/composables/useCustomizer'

Signature

function useCustomizer(): {
  open: Ref<boolean>
  openCustomizer: () => void
  closeCustomizer: () => void
  toggleCustomizer: () => void
}

Returns

Member	Type	Description
open	Ref<boolean>	Writable, so it can be bound with v-model.
openCustomizer	() => void	Opens the drawer.
closeCustomizer	() => void	Closes it.
toggleCustomizer	() => void	Flips it. Bound to t c.

Example

<script setup lang="ts">
import { useCustomizer } from '@shared/composables/useCustomizer'

const { openCustomizer } = useCustomizer()
</script>

<template>
  <button type="button" @click="openCustomizer()">
    Change the theme
  </button>
</template>

Notes

• A singleton ref rather than a prop or provide. The drawer is mounted once in App.vue, but the floating trigger, the showcase card and the t c shortcut all need to open it. A shared ref means none of that state has to be threaded through the layout tree.
• This composable holds the open state only. What the drawer changes is useConfig and useTheme.

Related

• Theme customizer — the drawer, its presets and the config snippet.
• useTheme — what it writes to.
• useShortcuts — the t c binding.