ColorModeSelect

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

Usage

The ColorModeSelect component extends the SelectMenu component, so you can pass any property such as color, variant, size, etc.

<template>
  <PColorModeSelect />
</template>

Examples

With custom icons

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

app/app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      system: 'i-lucide-laptop',
      light: 'i-lucide-sun-medium',
      dark: 'i-lucide-moon-star'
    }
  }
});

Use the vite.config.ts to customize the icon with the ui.icons property:

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({
      ui: {
        icons: {
          light: 'i-lucide-sun-medium',
          dark: 'i-lucide-moon-star'
        }
      }
    })
  ]
});

API

Props

Prop	Default	Type
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`any` The icon displayed when an item is selected.
`clearIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the clear button.
`class`		`any`
`leadingIcon`		`any` Display an icon on the left side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`open`		`boolean` The controlled open state of the Combobox. Can be binded with `v-model:open`.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`resetModelValueOnClear`		`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`loop`		`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`by`		`string \| (a: SelectMenuItem[], b: SelectMenuItem[]): boolean` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`autofocus`		`boolean`
`defaultValue`		null \| string \| number \| bigint \| false \| true \| { [key: string]: any; label?: string \| undefined; description?: string \| undefined; icon?: any; avatar?: AvatarProps \| undefined; chip?: ChipProps \| undefined; type?: "label" \| "separator" \| "item" \| undefined; disabled?: boolean \| undefined; onSelect?: ((e: Event) => void) \| undefined; class?: any; ui?: Partial<Pick<{ base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; value?: SlotClass; placeholder?: SlotClass; arrow?: SlotClass; content?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; separator?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemDescription?: SlotClass; input?: SlotClass; focusScope?: SlotClass; trailingClear?: SlotClass; }, "label" \| "separator" \| "item" \| "itemLeadingIcon" \| "itemLeadingAvatar" \| "itemLeadingAvatarSize" \| "itemLeadingChip" \| "itemLeadingChipSize" \| "itemTrailing" \| "itemTrailingIcon" \| "itemWrapper" \| "itemLabel" \| "itemDescription">> \| undefined; } The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`multiple`		`false` Whether multiple options can be selected or not.
`required`		`boolean`
`id`		`string`
`placeholder`		`string` The placeholder text when the select is empty.
`searchInput`	`true`	`boolean \| Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" \| "defaultValue">` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }` Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"sm" \| "md" \| "xs" \| "lg" \| "xl"`
`clear`	`false`	`false \| false & Partial<Omit<ButtonProps, LinkPropsKeys>>` Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`Omit<ComboboxContentProps, "asChild" \| "as" \| "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| Omit<ComboboxArrowProps, "asChild" \| "as">` Display an arrow alongside the menu. `{ rounded: true }`
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Akar.
`valueKey`	`undefined`	`undefined` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'label'`	`string` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`string` When `items` is an array of objects, select the field to use as the description.
`modelModifiers`		`Omit<ModelModifiers, "lazy">`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "always" \| "empty" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`autofocusDelay`		`number`
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`ui`		{ base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; value?: SlotClass; placeholder?: SlotClass; arrow?: SlotClass; content?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; separator?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemDescription?: SlotClass; input?: SlotClass; focusScope?: SlotClass; trailingClear?: SlotClass; }

Changelog

No recent changes

ColorModeImage

An image element with a different source for light and dark mode.

ColorModeSwitch

A Switch to toggle between light and dark mode.