Theme Color Customization
Kimi UI uses Material-UI as its foundation and provides an easy way to customize theme colors. This guide will help you understand how to modify the color palette to match your brand identity.
Color System Overview
The color system is built around these key colors that you can customize:
Primary
Main brand color used for primary buttons, links, and active states
Secondary
Used for secondary actions and supporting elements
Info
Used for informational elements such as help text and tooltips
Success
Indicates successful actions or positive status
Warning
Indicates warnings or actions requiring attention
Error
Indicates errors or potentially destructive actions
How to Customize Colors
To customize the theme colors, you need to modify the following files:
- src/theme/theme-config.tsContains the base color palette configuration
- src/theme/core/palette.tsProcesses the color palette and creates color channels
Step 1: Modify the Theme Configuration
// src/theme/theme-config.ts
export const themeConfig = {
// Other configurations...
palette: {
primary: {
main: '#00A76F', // Replace with your brand color
light: '#3BE7B6',
dark: '#007867',
contrastText: '#FFFFFF',
},
secondary: {
main: '#6c79ba', // Replace with your secondary color
light: '#8E9BEB',
dark: '#45578C',
contrastText: '#FFFFFF',
},
// You can also customize other colors:
info, success, warning, error, etc.
},
}
Step 2: Color Variants and Accessibility
Each color in the palette automatically generates:
- Light variant (lighter than the main color)
- Dark variant (darker than the main color)
- Contrast text (for optimal readability against the main color)
- Color channels (for alpha transparency operations)
Important Note: Ensure that your chosen colors meet WCAG accessibility standards for proper contrast ratios.
Using Theme Colors in Your Components
// Example of using theme colors in your components
import { Box, Typography, Button } from '@mui/material';
function MyComponent() {
return (
<Box sx={{ bgcolor: 'primary.light', p: 3, borderRadius: 2 }}>
<Typography color="primary.dark">
This text uses the primary dark color
</Typography>
<Button
variant="contained"
sx={{
bgcolor: 'secondary.main',
'&:hover': { bgcolor: 'secondary.dark' }
}}
>
Custom Styled Button
</Button>
</Box>
);
}
Useful Color Tools
Material-UI Color Tool
Official MUI color tool to help generate a color palette for your application with previews.
https://mui.com/material-ui/customization/color/Eva Color Generator
Generate and customize color palettes with multiple shades for each color.
https://colors.eva.designContrast Checker
Ensure your colors meet WCAG accessibility standards for proper contrast.
https://webaim.org/resources/contrastchecker/