ColorModelación

Un interruptor para alternar entre el modo claro y oscuro.

xph0000xUso

El componente ColorModeSwitch extiende el componente Switch, por lo que puede pasar cualquier propiedad como color, size, etc.

<template>
  <UColorModeSwitch />
</template>

xph007XEjemplos

Con iconos personalizados

Utilice el icono app.config.ts para personalizar el icono con la propiedad ui.icons:

app/app.config.ts

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

Utilice el vite.config.ts para personalizar el icono con la propiedad ui.icons:

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          light: 'i-lucide-sun-medium',
          dark: 'i-lucide-moon-star'
        }
      }
    })
  ]
})

API (Edición española)

Accesorios

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`highlight`		`boolean` Highlight the ring color like a focus state.
`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.ui.icons.loading`	`any` 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`
`trueValue`		`boolean` The value used when the switch is on. Defaults to `true`.
`falseValue`		`boolean` The value used when the switch is off. Defaults to `false`.
`ui`		`{ root?: SlotClass; base?: SlotClass; container?: SlotClass; thumb?: SlotClass; icon?: SlotClass; wrapper?: SlotClass; label?: SlotClass; description?: SlotClass; }`

Changelog (Edición española)

No recent changes

ColorModeSelect

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

LocaleSelect

A Select to switch between locales.