@react-theming/theme-swatch

npm i @react-theming/theme-swatch

Usage no npm install needed!

<script type="module">
  import reactThemingThemeSwatch from 'https://cdn.skypack.dev/@react-theming/theme-swatch';
</script>

README

npm version

@react-theming/theme-swatch

Install

npm i @react-theming/theme-swatch

Usage

import { createSwatch } from '@react-theming/theme-swatch';
/* you need to provide a `styled` functions from Styled Components, Emotion or '@storybook/theming'  */
import styled from '@emotion/styled';

const ThemeSwatch = createSwatch(styled);

colors = ['red', 'green', '#13f0b7', 'rgb(100,180,250)'];

const YourComponent = () => {
  return <ThemeSwatch theme={colors} size={64} />;
};

example

Credits

Created with ❤︎ to React and CSS-in-JS by @usulpro [React Theming]