Theme

Basic usage

Set theme color before render App Color must following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().

import { setTheme } from '@doopage/react-ui-kit'

setTheme({
  primaryColor: '#551A8B',
})

ReactDOM.render(<App/>, document.getElementById("root"));

To get theme

import { getTheme } from '@doopage/react-ui-kit'
const theme = getTheme()

useTheme

import { useTheme } from '@doopage/react-ui-kit'
const MyComponent = () => {
  const theme = useTheme()
    return (
      <div>{theme.primaryColor}</div>
    )
}

Playground

purple input

{setTheme({
  primaryColor: '#551A8B',
})}
<Button color="primary">Purple button</Button>
<Input variant="outlined" label="purple input" />

{setTheme({
  primaryColor: '#551A8B',
})}
<Button color="primary">Purple button</Button>
<Input variant="outlined" label="purple input" />

() => {
  const theme = useTheme()
  return (
    <>
      <Button color="primary">{theme.primaryColor}</Button>
    </>
  )
}

() => {
  const theme = useTheme()
  return (
    <>
      <Button color="primary">{theme.primaryColor}</Button>
    </>
  )
}