Skip to main content


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 {
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.

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.