I'm looking to customize the colors in my theme for specific categories within my application.
I set up a theme and am utilizing it in my component like this:
theme.tsx
import { createTheme, Theme } from '@mui/material/styles'
import { red } from '@mui/material/colors'
export const theme: Theme = createTheme({
palette: {
primary: {
main: blue[800]
},
secondary: {
main: '#19857b'
},
cat1: {
main: red[700]
}
}
})
circle.tsx
import CircleIcon from '@mui/icons-material/FiberManualRecord'
import {theme} from '/shared/theme'
export function Circle() {
return (
<>
<CircleIcon style={{ color: theme.palette.cat1.main }} />
<CircleIcon style={{ color: theme.palette.cat1[200] }} />
</>
)
}
My goal is to dynamically set element colors. For example, I want circles in category 1 to be red, with all necessary colors defined in the theme. Rather than importing every possible color in each component, I rely on the theme for color definitions.
Additionally, I aim to calculate the color of another element based on these definitions. As shown in the code above, I'm trying to determine the shade '200' of red.