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
npm install @dub-stack/chakra-radix-colors @radix-ui/colors
Quick Start
-
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.Now, we will add our custom theme:
); }"> // Pass our theme prop to the `ChakraProvider` import { theme } from "@dub-stack/chakra-radix-colors"; function App({ Component }) { return ( <ChakraProvider theme={theme}> <Component /> </ChakraProvider> ); }
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.
-
We are now ready to use the Radix-ui colors with automatic dark mode support in our app. Try the example below!
{ 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 Grass Grass 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 ( <Box bg={c("slate.1")} w="full" h="full"> // Toggle the mode to see automatic themeing in action! <Button onClick={toggleColorMode}>Switch Theme</Button> <HStack> // We can use the light and dark colors ... <Box bg={c("blue.4")} h="12" w="12" /> <Box bg={c("blueDark.4")} h="12" w="12" /> // There are alpha colors ... <Box bg={c("pinkA.4")} h="12" w="12" /> <Box bg={c("pinkDarkA.4")} h="12" w="12" /> // Use color schemes with our radix colors too <Badge colorScheme="grass">Grass</Badge> <Badge colorScheme="mint">Grass</Badge> </HStack> </Box> ); };
-
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, 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.
// 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`
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
// 4. Now you can use these colors in your components
function Usage() {
return <Box bg="purple.12">Welcome</Box>
}
12 Oct 20, 2022
27 Jun 27, 2022
5 Nov 18, 2022
42 Sep 30, 2022
64 Dec 22, 2022
18 Dec 31, 2022
41 Nov 27, 2022
13 Dec 1, 2022
17 Dec 2, 2022
2 Feb 7, 2022
17 Jan 2, 2023
9 Nov 19, 2022
2 Mar 18, 2022
13 Oct 23, 2022
21 Oct 25, 2022
5 Nov 15, 2022
2 Oct 1, 2022
80 Dec 18, 2022