Powerful theme editor for your next:

 

npm i @hypertheme-editor/chakra-ui

yarn add @hypertheme-editor/chakra-ui

import * as React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeEditorProvider, HyperThemeEditor } from '@hypertheme-editor/chakra-ui'
import theme from './my-theme'

function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <HyperThemeEditor pos="fixed" bottom={4} right={2} />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}

@hypertheme-editor-pro:registry=https://npm.hyperthe.me
registry=https://registry.npmjs.com

$ npm login --registry=https://npm.hyperthe.me

Username: hypertheme
Password: <YOUR_LICENSE_KEY>
Email: (this IS public) <YOUR_EMAIL>

Logged in as hypertheme on https://npm.hyperthe.me/.

npm i @hypertheme-editor-pro/chakra-ui

yarn add @hypertheme-editor-pro/chakra-ui

import * as React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeEditorProvider, HyperThemeEditor } from '@hypertheme-editor-pro/chakra-ui'
import theme from './my-theme'

function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <HyperThemeEditor pos="fixed" bottom={4} right={2} />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}