This package provides the @radix-ui/colors in a chakra project.
MIT License
16
stars
0
forks
source link
readme
chakra-radix-colors
`chakra-radix-colors` provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications.
## About
Chakra-ui provides all of the building blocks needed for creating beautiful and accessible UIs, however when creating custom components or styling your elements there is not a way to have automatic dark mode support. Radix-ui provides a colors package that supports automatic dark mode, has great accessibility, and provides excellent guidance for using their color palette. This package helps glue some of my favorite features of Chakra and Radix together.
For a video that describes why this page exists and how to get started: https://www.youtube.com/watch?v=QnloAQTHeUg
## Installation
```bash
npm install @dub-stack/chakra-radix-colors @radix-ui/colors
```
## Quick Start
1. To get started without customizing the theme simply setup your providers as you would in a Chakra application. For instructions on setting up a `ChakraProvider`, see the [chakra docs](https://chakra-ui.com/docs/getting-started#set-up-provider).
Now, we will add our custom theme:
```ts
// Pass our theme prop to the `ChakraProvider`
import { theme } from "@dub-stack/chakra-radix-colors";
function App({ Component }) {
return (
);
}
```
This custom theme defines the 1 - 12 color palette's that Radix-ui provides, this also overrides all of the component styles to use the Radix-ui colors.
2. We are now ready to use the Radix-ui colors with automatic dark mode support in our app. Try the example below!
```ts
import { Box, HStack, Button, Badge, useColorMode } from "@chakra-ui/react";
import { useThemedColor } from "chakra-radix-colors";
const MyComponent = () => {
const { toggleColorMode } = useColorMode();
const c = useThemedColor();
return (
// Toggle the mode to see automatic themeing in action!
// We can use the light and dark colors ...
// There are alpha colors ...
// Use color schemes with our radix colors too
GrassGrass
);
};
```
3. While developing your application check out https://radix-ui.com/colors to see all of the palettes, and a guide on how to use the colors. Following the colors guide will help achieve consistent coloring, and helps to build an accessible web with compliant contrast ratios.
## Customize the Theme
Because this package is just a theme customization using the methods described in the [chakra docs](https://chakra-ui.com/docs/styled-system/theming/customize-theme), we can override the theme in the same way using as many or as little overrides from this package as we want.
> ❗️ Important: The default theme provides the gray palette used as "slate". Radix provides many different shades of gray, see this customization example to learn how you can change the default gray palette. While all gray colors will still be available, the default gray used will be modified.
```ts
// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"
import { theme } from "@dub-stack/chakra-radix-colors";
// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
colors: {
// add all of the colors in ...
...theme.colors,
// (optionally) overwrite the default gray color
_gray: { ...theme.colors.sand },
_grayDark: { ...theme.colors.sandDark },
_grayA: { ...theme.colors.sandA },
_grayDarkA: { ...theme.colors.sandDarkA },
// add any other colors you would like!
},
components: {
// add all of the components in
...theme.components,
// add any other component overrides you would like!
},
styles: {
global: (props) => ({
// add the default styles
...theme.styles.global(props)
// add any other styles you would like!
body: {
backgroundColor: "purple.1"
},
})
}
})
// 3. Pass the new theme to `ChakraProvider`
// 4. Now you can use these colors in your components
function Usage() {
return Welcome
}
```
