HyperTheme

Editor v0.1

DocsChangelog

Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1

Guides

Create a Custom Editor Panel

Components

ThemeEditorProviderHyperThemeEditorThemeEditorThemeEditorDrawerThemeEditorDrawerHeaderThemeEditorDrawerFooterThemeEditorRootPanelThemeEditorButtonColorModeToggleThemeIcon

Hooks

useThemeEditor

Editors

ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

ColorModeToggle


ColorModeToggle is a dark/light mode switcher component.

It's the component used by ThemeEditorDrawerHeader.

  • View source

  • Import

    Community Version

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

    Pro Version PRO

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

    Usage

    Basic Usage

    With Styled Props

    Props

    NameTypeDefaultShort Description
    showLabelbooleanfalseShow "light" or "dark" label
    size'sm' | 'md' | 'lg''md'Change size of the button

    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:

    size

    Change the size of the button.

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

    Here's an example showing the different sizes:


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Basic Usage
    • With Styled Props
    • Props
    • showLabel
    • size