import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import Button from '../Button/Button';
import ColorScheme, { schemes } from './ColorScheme';
# ColorScheme
`ColorScheme` defines CSS color variables that can be used by other components
to make themselves "theme-aware." A `ColorScheme` is generally rendered at the
page level to define the color scheme of that page.
Render multiple `ColorScheme`s with different `type` props to create an
environment that responds to the user's preferences (e.g., "dark mode" /
"light mode"):
```js
import { ColorScheme, schemes } from '@quartz/interface';
function MyPage() {
return (
<>
Hello, world!
);
}
```
Some colors are optional; note the described fallback behavior in the prop
descriptions. Other color values are not configurable and are calculated
automatically from base values.
## Usage guidelines
- **Do** supply colors in hexadecimal notation, e.g., `#000000`.
- **Do** define official color schemes inside Prism alongside the existing `schemes`.
- **Do** use colors from `@quartz/styles` when defining color schemes, modifying it if needed.
- **Do** use `Helmet` (or your preferred `` manager) to hoist `ColorScheme` into the ``.
- **Do** supply a print `ColorScheme`.
## Props
The `Button` is rendered to show how it responds to `ColorScheme`. Also, note
that because we are providing our own `ColorScheme` for this story, it will not
respond to the theming toolbar—here or in the Canvas tab.