fix(docz-theme-default): add theme provider around all theme

packages/docz-theme-default/src/components/ui/Page.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react'
 import { SFC, Fragment } from 'react'
 import { PageProps, ThemeConfig } from 'docz'
-import { ThemeProvider } from 'emotion-theming'
 import lighten from 'polished/lib/color/lighten'
 import Edit from 'react-feather/dist/icons/edit-2'
 import styled from 'react-emotion'
 
-import { mq } from '../../styles/responsive'
 import { ButtonLink } from './Button'
 import { GithubLink, Sidebar, Main } from '../shared'
 import { get } from '@utils/theme'
@@ -57,12 +55,6 @@ const EditIcon = styled(Edit)`
   margin-right: 5px;
 `
 
-// tslint:disable
-const mergeTheme = (config: any) => (old: any) => ({
-  ...old,
-  docz: Object.assign({}, config.themeConfig, { mq }),
-})
-
 export const Page: SFC<PageProps> = ({
   children,
   doc: { link, fullpage, edit = true },
@@ -81,15 +73,13 @@ export const Page: SFC<PageProps> = ({
   return (
     <ThemeConfig>
       {({ repository, ...config }) => (
-        <ThemeProvider theme={mergeTheme(config)}>
-          <Main config={config}>
-            {repository && <GithubLink repository={repository} />}
-            {!fullpage && <Sidebar />}
-            <Wrapper>
-              {fullpage ? content : <Container>{content}</Container>}
-            </Wrapper>
-          </Main>
-        </ThemeProvider>
+        <Main config={config}>
+          {repository && <GithubLink repository={repository} />}
+          {!fullpage && <Sidebar />}
+          <Wrapper>
+            {fullpage ? content : <Container>{content}</Container>}
+          </Wrapper>
+        </Main>
       )}
     </ThemeConfig>
   )

packages/docz-theme-default/src/index.tsx

@@ -2,38 +2,52 @@ import 'rc-tooltip/assets/bootstrap.css'
 import './styles/global'
 
 import * as React from 'react'
-import { theme, DocPreview } from 'docz'
+import { theme, DocPreview, ThemeConfig } from 'docz'
+import { ThemeProvider } from 'emotion-theming'
 import webfont from 'webfontloader'
 
 import { config } from './config'
+import { mq } from './styles/responsive'
 import * as components from './components/ui'
 import * as modes from './styles/modes'
 
+// tslint:disable
+const mergeTheme = (config: any) => (old: any) => ({
+  ...old,
+  docz: Object.assign({}, config.themeConfig, { mq }),
+})
+
 const Theme = () => (
-  <DocPreview
-    components={{
-      page: components.Page,
-      notFound: components.NotFound,
-      render: components.Render,
-      blockquote: components.Blockquote,
-      h1: components.H1,
-      h2: components.H2,
-      h3: components.H3,
-      h4: components.H4,
-      h5: components.H5,
-      h6: components.H6,
-      hr: components.Hr,
-      ul: components.UnorderedList,
-      ol: components.OrderedList,
-      p: components.Paragraph,
-      a: components.Link,
-      inlineCode: components.InlineCode,
-      loading: components.Loading,
-      table: components.Table,
-      pre: components.Pre,
-      tooltip: components.Tooltip,
-    }}
-  />
+  <ThemeConfig>
+    {config => (
+      <ThemeProvider theme={mergeTheme(config)}>
+        <DocPreview
+          components={{
+            page: components.Page,
+            notFound: components.NotFound,
+            render: components.Render,
+            blockquote: components.Blockquote,
+            h1: components.H1,
+            h2: components.H2,
+            h3: components.H3,
+            h4: components.H4,
+            h5: components.H5,
+            h6: components.H6,
+            hr: components.Hr,
+            ul: components.UnorderedList,
+            ol: components.OrderedList,
+            p: components.Paragraph,
+            a: components.Link,
+            inlineCode: components.InlineCode,
+            loading: components.Loading,
+            table: components.Table,
+            pre: components.Pre,
+            tooltip: components.Tooltip,
+          }}
+        />
+      </ThemeProvider>
+    )}
+  </ThemeConfig>
 )
 
 webfont.load({