Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Theme

Description#

The theme is a set of configurations to change the default styles of chakra ui.

Import#

it can be imported from the core.

Code Example

import { theme } from "@codecraftkit/core";

or alone.

Code Example

import { theme, rawTheme } from "@codecraftkit/theme";

Usage#

Usage Ready to the provider#

Code Example

import { theme } from '@codecraftkit/core'


class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props


    return <ChakraProvider theme={theme}>
       <Component {...pageProps} />
    </ChakraProvider>
  }
}

Raw theme to add more customizations#

To add more customization options to the chakra theme, in order to extend this theme use rawTheme

rawTheme is a simple object with the codecraft default styles

Code Example

import { extendTheme } from '@chakra-ui/react'
import { rawTheme } from '@codecraftkit/core'


const customStyles = {
  ...rawTheme,
  components: {
    ...rawTheme?.components,
    Button: {
      baseStyle:{
        bg: 'red'
      }
    }
  },
  fonts: {
    ...rawTheme?.fonts,
    heading: "Inter, sans-serif",
    body: "Inter, sans-serif",
  },
}


const theme = extendTheme(customStyles)


class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props


    return <ChakraProvider theme={theme}>
       <Component {...pageProps} />
    </ChakraProvider>
  }
}