Color System
yarn add use-color-system
import { useColorSystem } from 'use-color-system'
const colors = useColorSystem({
hueOffset: 28, // pretty random number 0-30
invertedLightness: false, // enable for automatic Dark Mode
highContrastMode: false // enable for accessibility
});
styledSystemTheme.colors = colors;<Box bg="gray.9" color="gray.0">
Hello
<Text color="red.5">World</Text>
</Box>Depending on colors may defer: usually it's gray magenta red
orange
lime
green
teal
cyan
blue
purple