Skip to Content
This package is deprecated. Check out the successor: Chunk UI Kit
DocsComponentsDarkModeToggle

DarkModeToggle

The DarkModeToggle is a user-friendly switch allowing users to easily flip between light and dark themes within the application. It provides a convenient way to support users’ preference for their viewing mode and can help enhance readability and visual comfort.

Usage

Here’s how you can incorporate the DarkModeToggle component into your application:

import { DarkModeToggle } from '@creation-ui/react' export const Demo = () => { return <DarkModeToggle /> }

Component API

For detailed information about the DarkModeToggle component’s properties, refer to the following:

DarkModeToggle component props

PropDefaultDescription
onChange
(checked: boolean) => void

Callback

checked
boolean

Is toggle checked?

style
React.CSSProperties

Custom style API

size24
number | string

Size of the toggle

animationProperties
typeof defaultProperties

Properties for the animation

moonColor
string

Moon icon color

sunColor
string

Sun icon color

Last updated on