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

<Meta title="Guides/Installation/Advanced" />

# Installation: Advanced

This page is about rolling out your own alternative to `<RootProvider/>` (advanced usage).

If you are looking for how to install, refer to the [installation guides](/story/guides-installation-applications--page) instead.

Plans exist to allow injecting a local theme during instantation.

Meanwhile, if you want to experiment with this, you can roll your own implementation in a few lines of code.

```tsx
import type { ThemeName } from '@preply/ds-core';
import { COLOR_SCHEME_DEFAULT } from '@preply/ds-core';
import {
    ColorSchemeProvider,
    ThemeProvider,
    ThemesProvider,
    colorSchemes,
} from '@preply/ds-web-core';
import React, { FC } from 'react';

import type { RootTarget } from '@preply/ds-web-root';
import { Root, themes } from '@preply/ds-web-root';

const MY_THEME: ThemeName = 'my-theme';
themes[MY_THEME] = new Theme(...);

export const RootProvider: FC = ({ children }) => (
    <ThemesProvider themes={Object.values(themes)} colorSchemes={colorSchemes}>
        <ThemeProvider theme={MY_THEME}>
            <ColorSchemeProvider colorScheme={COLOR_SCHEME_DEFAULT}>
                <Root target={document.body}>{children}</Root>
            </ColorSchemeProvider>
        </ThemeProvider>
    </ThemesProvider>
);
```
