feat(gatsby-theme-docz): add custom logo support

core/gatsby-theme-docz/README.md

@@ -59,7 +59,20 @@ theme files just by creating your own file following a file naming convetion.
 Example: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js`
 you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?
 
-So, now that you know about how component shadowing works on Gatsby themes, you can override anything inside the `gatsby-theme-docz`.
+### Adding your logo
+
+So, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component
+but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`
+
+```js
+// src/gatsby-theme-docz/components/Logo/index.js
+import React from 'react'
+import logo from './logo.svg'
+
+export const Logo = () => <img src={logo} alt="That's my logo" />
+```
+
+Easy, right?
 
 ### Creating your own Docz theme
 

core/gatsby-theme-docz/src/components/Header/index.js

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import { jsx, Box, Flex, useColorMode } from 'theme-ui'
-import { Link, useConfig, useCurrentDoc } from 'docz'
+import { useConfig, useCurrentDoc } from 'docz'
 import styled from '@emotion/styled'
 
 import { themeProp } from '~utils/theme'
 
-import { Edit, Sun, Github } from '../Icons'
 import * as styles from './styles'
+import { Edit, Sun, Github } from '../Icons'
+import { Logo } from '../Logo'
 
 const Wrapper = styled(Box)`
   border-bottom: 1px solid ${themeProp('colors.header.border')};
@@ -22,13 +23,9 @@ export const Header = () => {
   }
 
   return (
-    <Wrapper sx={styles.wrapper}>
+    <Wrapper sx={styles.wrapper(colorMode)}>
       <div sx={styles.innerContainer}>
-        <Flex aligmItems="center">
-          <Link to="/" sx={styles.link}>
-            {config.title}
-          </Link>
-        </Flex>
+        <Logo />
         <Flex>
           {config.repository && (
             <Box sx={{ mr: 2 }}>

core/gatsby-theme-docz/src/components/Header/styles.js

@@ -1,8 +1,12 @@
 import * as mixins from '~utils/mixins'
 
-export const wrapper = {
-  bg: 'header.bg',
-}
+export const wrapper = mode => ({
+  backgroundSize: '400px auto',
+  background:
+    mode === 'dark'
+      ? `url(https://cdn-std.dprcdn.net/files/acc_649651/ykOjN7)`
+      : `url(https://cdn-std.dprcdn.net/files/acc_649651/zPkIFZ)`,
+})
 
 export const innerContainer = {
   ...mixins.centerAlign,
@@ -11,16 +15,6 @@ export const innerContainer = {
   justifyContent: 'space-between',
 }
 
-export const link = {
-  fontSize: 3,
-  fontWeight: 600,
-  color: 'header.text',
-  textDecoration: 'none',
-  ':hover': {
-    color: 'primary',
-  },
-}
-
 export const headerButton = {
   ...mixins.centerAlign,
   outline: 'none',

core/gatsby-theme-docz/src/components/Logo/index.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');

core/gatsby-theme-docz/src/components/Logo/index.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx, Flex } from 'theme-ui'
+import { Link, useConfig } from 'docz'
+
+import * as styles from './styles'
+
+export const Logo = () => {
+  const config = useConfig()
+  return (
+    <Flex aligmItems="center" sx={styles.logo}>
+      <Link to="/" sx={styles.link}>
+        {config.title}
+      </Link>
+    </Flex>
+  )
+}

core/gatsby-theme-docz/src/components/Logo/styles.js

@@ -0,0 +1,15 @@
+import './index.css'
+
+export const logo = {
+  fontFamily: 'Merriweather',
+  fontSize: 3,
+}
+
+export const link = {
+  fontWeight: 600,
+  color: 'header.text',
+  textDecoration: 'none',
+  ':hover': {
+    color: 'primary',
+  },
+}

core/gatsby-theme-docz/src/theme/modes.js

@@ -23,8 +23,8 @@ export const light = {
     text: colors.dark,
     border: colors.grayLight,
     button: {
-      bg: colors.grayLight,
-      color: colors.grayDark,
+      bg: colors.blue,
+      color: colors.white,
     },
   },
   props: {
@@ -70,7 +70,7 @@ export const dark = {
     text: colors.grayLight,
     border: colors.grayDark,
     button: {
-      bg: colors.grayDark,
+      bg: colors.skyBlue,
       color: colors.white,
     },
   },