The ColorModeButton component extends the Button component, so you can pass any property such as color, variant, size, etc.
<template>
<PColorModeButton />
</template>
color="neutral" and variant="ghost".Use the app.config.ts to customize the icon with the pohon.icons property:
export default defineAppConfig({
pohon: {
icons: {
light: 'i-ph:sun',
dark: 'i-ph:moon'
}
}
})
Use the vite.config.ts to customize the icon with the pohon.icons property:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
pohon({
pohon: {
icons: {
light: 'i-ph:sun',
dark: 'i-ph:moon'
}
}
})
]
})
As the button is wrapped in a ClientOnly component, you can pass a fallback slot to display a placeholder while the component is loading.
<template>
<PColorModeButton>
<template #fallback>
<PButton loading variant="ghost" color="neutral" />
</template>
</PColorModeButton>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|