import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Advanced`}),`
`,(0,c.jsx)(t.h1,{id:`installation-advanced`,children:`Installation: Advanced`}),`
`,(0,c.jsxs)(t.p,{children:[`This page is about rolling out your own alternative to `,(0,c.jsx)(t.code,{children:`<RootProvider/>`}),` (advanced usage).`]}),`
`,(0,c.jsxs)(t.p,{children:[`If you are looking for how to install, refer to the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`installation guides`}),` instead.`]}),`
`,(0,c.jsx)(t.p,{children:`Plans exist to allow injecting a local theme during instantation.`}),`
`,(0,c.jsx)(t.p,{children:`Meanwhile, if you want to experiment with this, you can roll your own implementation in a few lines of code.`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`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>
);
`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};