use-color-system

Make a color palette for styled-system

Usage no npm install needed!

<script type="module">
  import useColorSystem from 'https://cdn.skypack.dev/use-color-system';
</script>

README

Default Color scheme

Color System

Website | CodeSandbox

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>