import { Meta } from '@storybook/addon-docs';

<Meta title="Lib Utilities/DarkModeProps" component={<></>} />

## Dark Mode Props

`DarkModeProps` exports interface to support ```darkMode?: boolean``` that should be extended by all components supporting dark mode.

It also exports `Theme` and `Theme` that allow you to utilize `darkMode` as a enum to more elegantly style components using `cx`.

#### How it should be used

```
import { DarkModeProps } from '@leafygreen-ui/lib';

interface ComponentProps extends DarkModeProps {
  ...
}

const styles: Record<Theme, string> = {
  [Theme.Light]: css`
    /* styles here */
  `,
  [Theme.Dark]: css`
    /* styles here */
  `,
};

const TestComponent = ({ darkMode, ...rest }: ComponentProps) => {

  const theme = getTheme(darkMode);

  return (
    <div
      className={cx(styles[theme])}
    />
  );

```