# suite-theming

React provider, components and theme definitions for applying styles to frontend applications

## Usage

### Implementing the Provider at the base App/Layout component

```ts
import { ThemeProvider } from '@theorchard/suite-theming';

const Layout: FC<object> = ({}) => (
    <ThemeProvider>
        <LeftNavigation />
        <MainContent />
    </ThemeProvider>
);
```

### Changing the theme using the provided component

Use the provided ThemeSwitcher component and (conditionally) render it anywhere in the app
This component will dynamically show a list of available themes for the actual (brand) context _(this is internally achieved using CDN_URL env var and/or localStorage)_.

```ts
import { ThemeSwitcher } from '@theorchard/suite-theming';

const LeftNavFooter: FC<object> = () => (
    <footer>
        <ThemeSwitcher />
    </footer>
);
```

### Changing the theme using your custom component

If you have special requirements at your app you can use the exposed context

_Use with caution to not expose brands outside their context!_

```ts
import { ThemeContext } from '@theorchard/suite-theming';

const MyComponent: FC<object> = () => {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        <button
            onClick={() => (theme === 'themeOne' ? setTheme('themeTwo') : setTheme('themeOne'))}
        />
    );
};
```

## Creating or modifying themes

A theme definition is basically a (typed) json object which defines pair of css variables - values.

As per this requirement, all scss color definitions at the frontend app should have the form of

```
var(--primary)
```

instead of

```
$primary
```

and obviously no hardcoded hex/rgb(a) values should remain at the scss files if you want those color to be "themed".

Please ensure your frontend app's scss files are updated with the above prior to implement this package