DecaUIProvider
The DecaUIProvider component is used to customize the general look and feel of your website and allows you to edit the stitches theme used when rendering your site.
Import
import { DecaUIProvider } from "@deca-ui/react"
Usage
<Button>Default</Button>
<DecaUIProvider
root={false}
theme={{
colors: { primary: "$green500" },
radii: { sm: "15px" }
}}
>
<Button>Themed</Button>
</DecaUIProvider>
Enabling Dark Mode
To allow components to render in dark mode, set the mode to "dark"
<DecaUIProvider mode="dark">
...
</DecaUIProvider>
Root Prop
The root prop is enabled by default and should be disabled if used anywhere else besides the top level of your application. Typically, you would have a provider with root={false} when having some sort of sub-theme within your application.
<DecaUIProvider root={false}>
...
</DecaUIProvider>
Base Theme
colors: {
text: '$black',
primary: '#228BE6',
secondary: '#F06595',
success: '#37B24D',
warning: '#FFA000',
error: '#F03E3E',
neutral: '#868E96',
black: '#000000',
white: '#FFFFFF',
// reserved colors for popover and modal component
popperDarkBg: '#131415',
popperLightBg: '$white',
transparent: '#FFFFFF00',
brown900: '#3E2723',
brown800: '#4E342E',
brown700: '#5D4037',
brown600: '#6D4C41',
brown500: '#795548',
brown400: '#8D6E63',
brown300: '#A1887F',
brown200: '#BCAAA4',
brown100: '#D7CCC8',
brown50: '#EFEBE9',
blueGray900: '#263238',
blueGray800: '#37474F',
blueGray700: '#455A64',
blueGray600: '#546E7A',
blueGray500: '#607D8B',
Made by Heril Saha