---
title: "Color Mode"
description: "Pohon UI integrates with VueUse to allow for easy switching between light and dark themes."
canonical_url: "https://vinicunca.dev/pohon/getting-started/integrations/color-mode/vue"
---
# Color Mode

> Pohon UI integrates with VueUse to allow for easy switching between light and dark themes.

> [!NOTE]
> See: /pohon/getting-started/integrations/color-mode/nuxt
> 
> Looking for the **Nuxt** version?

## Usage

Pohon UI automatically registers the [useDark](https://vueuse.org/core/useDark) composable as a Vue plugin, so there's no additional setup required.

### Components

You can use the built-in [ColorModeAvatar](https://vinicunca.dev/pohon/components/color-mode-avatar) or [ColorModeImage](https://vinicunca.dev/pohon/components/color-mode-image) components to display different images for light and dark mode and the [ColorModeButton](https://vinicunca.dev/pohon/components/color-mode-button), [ColorModeSwitch](https://vinicunca.dev/pohon/components/color-mode-switch) or [ColorModeSelect](https://vinicunca.dev/pohon/components/color-mode-select) components to switch between light and dark modes.

You can also use the [useColorMode](https://vueuse.org/core/useColorMode) composable to build your own custom component:

```vue [ColorModeButton.vue]
<script setup lang="ts">
import { useColorMode } from '@vueuse/core';
import { computed } from 'vue';

const colorMode = useColorMode();

const isDark = computed({
  get() {
    return colorMode.value === 'dark';
  },
  set(_isDark: boolean) {
    colorMode.value = _isDark ? 'dark' : 'light';
  }
});
</script>

<template>
  <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>
```

### Configuration

You can disable this plugin with the `colorMode` option in your `vite.config.ts`:

```ts [vite.config.ts]
import vue from '@vitejs/plugin-vue';
import ui from 'pohon-ui/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    vue(),
    ui({
      colorMode: false
    })
  ]
});
```


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.