import styles from 'ansi-styles';
styles.color.ansi(styles.rgbToAnsi(100, 200, 15)); // RGB to 16 color ansi foreground code
styles.bgColor.ansi(styles.hexToAnsi('#C0FFEE')); // HEX to 16 color ansi foreground code
styles.color.ansi256(styles.rgbToAnsi256(100, 200, 15)); // RGB to 256 color ansi foreground code
styles.bgColor.ansi256(styles.hexToAnsi256('#C0FFEE')); // HEX to 256 color ansi foreground code
styles.color.ansi16m(100, 200, 15); // RGB to 16 million color foreground code
styles.bgColor.ansi16m(...styles.hexToRgb('#C0FFEE')); // Hex (RGB) to 16 million color foreground code
import { createStyles } from "@dash-ui/styles";
export const styles = createStyles({
// createStyles() uses these themes to create a generic
// for variable and theme usage in the styles() instance
themes: {
light: {
color: {
// var(--color-bg)
bg: "#fafafa",
},
},
dark: {
color: {
// var(--color-bg)
bg: "#1a1a1a",
},
},
},
});
styles.one(({ color }) => ({
// Will autocomplete and pass type checking
backgroundColor: color.bg,
// "red" is not in our `themes` and this will fail
// type checking
color: color.red,
}));
// Likewise, this will pass typechecking
styles.theme("dark");
// This will not
styles.theme("whoami");
import styles from 'ansi-styles';
console.log(`${styles.green.open}Hello world!${styles.green.close}`);
// Color conversion between 256/truecolor
// NOTE: When converting from truecolor to 256 colors, the original color
// may be degraded to fit the new color palette. This means terminals
// that do not support 16 million colors will best-match the
// original color.
console.log(`${styles.color.ansi(styles.rgbToAnsi(199, 20, 250))}Hello World${styles.color.close}`)
console.log(`${styles.color.ansi256(styles.rgbToAnsi256(199, 20, 250))}Hello World${styles.color.close}`)
console.log(`${styles.color.ansi16m(...styles.hexToRgb('#abcdef'))}Hello World${styles.color.close}`)
function StyleColorMode() {
const { toggleColorMode } = useColorMode()
const bg = useColorModeValue('red.500', 'red.200')
const color = useColorModeValue('white', 'gray.800')
return (
<>
<Box mb={4} bg={bg} color={color}>
This box's style will change based on the color mode.
</Box>
<Button size='sm' onClick={toggleColorMode}>
Toggle Mode
</Button>
</>
)
}
import { extendTheme, useStyleConfig } from '@chakra-ui/react'
// 1. define component configuration
const components = {
CustomBadge: {
baseStyle: ({ colorMode }) => ({
bg: colorMode === 'dark' ? 'green.300' : 'green.500',
color: colorMode === 'dark' ? 'gray.800' : 'white',
textTransform: 'uppercase',
fontWeight: 'semibold',
letterSpacing: '0.02em',
padding: '4px',
borderRadius: '2px',
fontSize: '12px',
}),
},
}
// 2. Call `extendTheme` and pass your custom values`
const theme = extendTheme({ components })
// 3. Use it in your components
function CustomBadge(props) {
const { size, variant, ...rest } = props
const styles = useStyleConfig('CustomBadge', { size, variant })
return <Box as='span' sx={styles} {...rest} />
}
// 4. Use the component
render(<CustomBadge>I am a custom badge</CustomBadge>)