HyperTheme

Editor v0.1.5

PricingDocsChangelog

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

useThemeEditor

The useThemeEditor hook provides the core functionalities of HyperTheme Editor.

All the Editor Panels uses this hook to live edit the current theme.

It also provides undo/redo functionalities.

  • View source

  • If you want to create a custom theme editor, this is the hook you have to use.

    Import

    Community Version

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

    Pro Version PRO

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

    Return value

    The useThemeEditor hook returns an object containing everything you need to create a custom Chakra UI Theme Editor.

    Here's a complete list of the returned object:

    NameTypeDescription
    themeThemeCurrent active theme
    initialThemeThemethe initial Theme provided by the ChakraProvider component
    setTheme(theme: Theme) => voidset immediately a new theme, the theme param must be a complete Chakra UI theme object
    canUndobooleanreturn true when undo history is not empty
    canRedobooleanreturn true when redo history is not empty
    undo() => voidundo last theme change, calling this function causes a live edit
    redo() => voidredo last theme undo, calling this function causes a live edit

    Usage

    Retrieve current theme

    Save current theme

    In this example we're simulating a custom save button that saves the customized theme to an api.

    As you have been noticed, this example is exactly the same of Retrieve current theme example:

    setTheme example

    In this example we're simply swapping the red.500 color with the blue.500 color.

    This component is useless but it demonstrates that calling the setTheme causes an instant theme live edit:

    Manage changes history

    This example explains how to create custom undo/redo buttons.


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting