ColorModeSwitch

Um switch para alternar entre os modos claro e escuro.

Uso

O componente ColorModeSwitch estende o componente Switch, então você pode passar qualquer propriedade como color, size, etc.

<template>
  <NColorModeSwitch />
</template>

Exemplos

Com ícones personalizados

Use o app.config.ts para personalizar o ícone com a propriedade ui.icons:

app/app.config.ts

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

Use o vite.config.ts para personalizar o ícone com a propriedade ui.icons:

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        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" \| "accent" \| "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

No recent changes

ColorModeSelect

Um Select para alternar entre os modos do sistema, escuro e claro.

LocaleSelect

Um Select para alternar entre locales.