Color Mode
Pohon UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
Usage
Pohon UI automatically registers the @nuxtjs/color-mode module for you, so there's no additional setup required.
Components
You can use the built-in ColorModeAvatar or ColorModeImage components to display different images for light and dark mode and the ColorModeButton, ColorModeSwitch or ColorModeSelect components to switch between light and dark modes.
You can also use the useColorMode composable to build your own custom component:
ColorModeButton.vue
<script setup lang="ts">
const colorMode = useColorMode();
const isDark = computed({
get() {
return colorMode.value === 'dark';
},
set(_isDark) {
colorMode.preference = _isDark ? 'dark' : 'light';
}
});
</script>
<template>
<ClientOnly v-if="!colorMode?.forced">
<PButton
:icon="isDark ? 'i-lucide:moon' : 'i-lucide:sun'"
color="neutral"
variant="ghost"
:aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="size-8" />
</template>
</ClientOnly>
</template>
Configuration
You can disable the @nuxtjs/color-mode module with the pohon.colorMode option in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['pohon-ui'],
pohon: {
colorMode: false
}
});