color-scheme.md

ColorScheme

Source

Adjusts the color scheme for all child components.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { ColorScheme } from 'chayns-components';

// ...

<ColorScheme {...} />

Props

The ColorScheme-component takes the following props:

Name	Type	Default	Required
color	string
secondaryColor	string
colorMode	string | number
children	ReactNode		✓
style	{ [key: string]: string | number }	{}
cssVariables	{ [key: string]: string | number }	{}

color

color?: string

The color to use for child components in hex format.

---

secondaryColor

secondaryColor?: string

A secondary color to use for child components in hex format.

---

colorMode

colorMode?: string | number

A color mode to use for child components.

---

children

children: ReactNode;

Children of the component.

---

style

style?: { [key: string]: string | number }

Styles to be set on the wrapper <div>-element.

---

cssVariables

cssVariables?: { [key: string]: string | number }

An object of CSS variables that should be set on the <div>-wrapper. Should look like this: { "--my-css-var": 100 }.