Overview
The chakra-radix-colors package provides radix-ui color palettes, automatic dark mode, and accessible colors to chakra-ui applications. It combines the features of Chakra UI and Radix UI to create beautiful and accessible user interfaces. It allows for custom components and styling with automatic dark mode support, and provides excellent guidance on using the color palette.
Features
- Radix-UI Color Palettes: The package includes the 1-12 color palette provided by Radix-UI, allowing for consistent and visually appealing colors in the application.
- Automatic Dark Mode: The theme supports automatic dark mode, making it easy to implement dark mode functionality in the application.
- Accessible Colors: The colors provided by the Radix-UI color palettes are designed with accessibility in mind, ensuring compliant contrast ratios and making the application more accessible to users.
Installation
To install the chakra-radix-colors package, follow these steps:
- Set up the ChakraProvider in your Chakra application according to the chakra docs.
- Add the custom theme to your application using the provided code snippet.
// Custom theme setup
After completing these steps, the Radix-UI colors with automatic dark mode support will be ready to use in your application.
Summary
The chakra-radix-colors package combines the features of Chakra UI and Radix UI to provide a seamless integration of color palettes, automatic dark mode, and accessible colors in Chakra applications. It simplifies the process of implementing dark mode, improves the accessibility of the application, and provides a comprehensive guide on using the color palettes. With this package, developers can create visually appealing and accessible user interfaces with ease.