ColorModeToggle

ColorModeToggle is a dark/light mode switcher component.

It's the component used by ThemeEditorDrawerHeader.

Import

Community Version

import { ColorModeToggle } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ColorModeToggle } from '@hypertheme-editor-pro/chakra-ui'

Usage

Basic Usage

<ColorModeToggle />

With Styled Props

<ColorModeToggle my={10} />

Props

This component accepts also StackProps from the Chakra UI Stack component, read more here.

showLabel

If true it shows a label indicating "light" or "dark".

This prop accepts a boolean value.

Here's an example with the label enabled:

<ColorModeToggle showLabel />

size

Change the size of the button.

Currently it accepts 'sm' | 'md' | 'lg' value.

Here's an example showing the different sizes:

<VStack>
  <ColorModeToggle size="sm" />
  <ColorModeToggle size="md" />
  <ColorModeToggle size="lg" />
</VStack>

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting