Skip to main content

Customization

Theme UI

gatsby-theme-dox uses Theme UI for styling the theme.

For customizing the default theme, follow the steps below:

Create a theme.js file in the src/gatsby-theme-dox directory.
Import the default theme and override the values you want to change.

// src/gatsby-theme-dox/theme.js
import theme from 'gatsby-theme-dox/src/theme'
export default {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#FFCD00'
  }
}

Syntax Highlighting

You can use your own favorite Prism theme for Syntax Highlighting.

Follow the @theme-ui/prism documentation for Gatsby plugin.

Logo

You can show a logo instead of the site's title at the top of the Sidebar. For doing that, follow these steps:

Create a React component called Logo.js in the src/gatsby-theme-dox/components directory.
Be sure to spread the props. For example:

// src/gatsby-theme-dox/components/Logo.js
import React from 'react'
function Logo(props) {
  return <img src="/logo.png" alt="Go to homepage" {...props} />
}
export default Logo

For customizing the footer create a footer.mdx file in the src/gatsby-theme-dox directory.