ColorModeSwitch

A switch to toggle between light and dark mode.

Usage

The ColorModeSwitch component extends the Switch component, so you can pass any property such as color, size, etc.

<template>
  <PColorModeSwitch />
</template>

Examples

With custom icons

Use the app.config.ts to customize the icon with the pohon.icons property:

app.config.ts

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:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      pohon: {
        icons: {
          light: 'i-ph:sun',
          dark: 'i-ph:moon'
        }
      }
    })
  ]
})

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean` When `true`, prevents the user from interacting with the switch.
`label`		`string`
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`defaultValue`		`boolean` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`id`		`string`
`value`		`string` The value given as data when submitted with a `name`.
`description`		`string`
`pohon`		`{ root?: ClassValue; base?: ClassValue; container?: ClassValue; thumb?: ClassValue; icon?: ClassValue; wrapper?: ClassValue; label?: ClassValue; description?: ClassValue; }`

Changelog

No recent changes

ColorModeSelect

A Select to switch between system, dark & light mode.

LocaleSelect

A Select to switch between locales.