How to use the @chakra-ui/theme.get function in @chakra-ui/theme
To help you get started, we’ve selected a few @chakra-ui/theme examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
chakra-ui / chakra-ui / packages / chakra-ui / src / Badge / styles.ts View on Github 
const subtleStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
const _color = colors[color] && colors[color][200];
const alphaColors = generateAlphaColors(_color);
const darkModeBg = alphaColors[300];
return {
light: {
bg: get(color, "100"),
color: get(color, "800"),
},
dark: {
bg: darkModeBg,
color: get(color, "200"),
},
};
};const outlineStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
const _color = colors[color] && colors[color][200];
const darkModeColor = addOpacity(_color, 0.8);
const boxShadowColor = colors[color] && colors[color][500];
return {
light: {
boxShadow: `inset 0 0 0px 1px ` + boxShadowColor,
color: get(color, "500"),
},
dark: {
boxShadow: `inset 0 0 0px 1px ` + darkModeColor,
color: darkModeColor,
},
};
};const subtleStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
const _color = colors[color] && colors[color][200];
const alphaColors = generateAlphaColors(_color);
const darkModeBg = alphaColors[300];
return {
light: {
bg: get(color, "100"),
color: get(color, "800"),
},
dark: {
bg: darkModeBg,
color: get(color, "200"),
},
};
};const interactionProps = ({ color, colorMode }: StyleProp) => {
const isDarkMode = colorMode === "dark";
const _color = isDarkMode ? 200 : 500;
return {
color: "white",
_checked: {
bg: get(color as string, _color),
borderColor: get(color as string, _color),
color: isDarkMode ? "gray.900" : undefined,
},
_checkedAndDisabled: {
borderColor: isDarkMode ? "transparent" : "gray.200",
bg: isDarkMode ? "whiteAlpha.300" : "gray.200",
color: isDarkMode ? "whiteAlpha.500" : "gray.500",
},
_disabled: {
bg: isDarkMode ? "whiteAlpha.100" : "gray.100",
borderColor: isDarkMode ? "transparent" : "gray.100",
},
_focus: {
boxShadow: "outline",
},
_invalid: {const solidStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
const _color = colors[color] && colors[color][500];
const darkModeBg = addOpacity(_color, 0.6);
return {
light: {
bg: get(color, "500"),
color: "white",
},
dark: {
bg: darkModeBg,
color: "whiteAlpha.800",
},
};
};const subtleStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
const _color = colors[color] && colors[color][200];
const alphaColors = generateAlphaColors(_color);
const darkModeBg = alphaColors[300];
return {
light: {
bg: get(color, "100"),
color: get(color, "800"),
},
dark: {
bg: darkModeBg,
color: get(color, "200"),
},
};
};const interactionProps = ({ color, colorMode }: StyleProp) => {
const isDarkMode = colorMode === "dark";
const _color = isDarkMode ? 200 : 500;
return {
color: "white",
_checked: {
bg: get(color as string, _color),
borderColor: get(color as string, _color),
color: isDarkMode ? "gray.900" : undefined,
},
_checkedAndDisabled: {
borderColor: isDarkMode ? "transparent" : "gray.200",
bg: isDarkMode ? "whiteAlpha.300" : "gray.200",
color: isDarkMode ? "whiteAlpha.500" : "gray.500",
},
_disabled: {
bg: isDarkMode ? "whiteAlpha.100" : "gray.100",
borderColor: isDarkMode ? "transparent" : "gray.100",
},
_focus: {
boxShadow: "outline",
},
_invalid: {
borderColor: isDarkMode ? "red.300" : "red.500",@chakra-ui/theme
The default theme for chakra components
