Customize Theme

Brand your documentation with a custom theme.

Engine & Specification

Smooth DOC uses xstyled and styled-components as CSS engine.

The theme follows System UI specification.

Define theme

Create a file src/smooth-doc/theme.js and export a theme constant:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  // Custom theme
}

Colors

Change primary color

Choose primary color from built-in colors and provide it using primaryColor helper:

// src/smooth-doc/theme.js
import { theme as baseTheme, primaryColor } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    ...primaryColor('red'),
  },
}

Available colors

Inspired by Tailwind, we included several built-in colors.

Use another primary color

A primary color is a palette composed of 9 tones. To specify a custom primary color, you have to define every tone:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    'primary-100': '#FFFAF0',
    'primary-200': '#FEEBC8',
    'primary-300': '#FBD38D',
    'primary-400': '#F6AD55',
    'primary-500': '#ED8936',
    'primary-600': '#DD6B20',
    'primary-700': '#C05621',
    'primary-800': '#9C4221',
    'primary-900': '#7B341E',
    primary: '#ED8936', // primary-500
  },
}

Generating custom color palettes

A common question we get is "how do I generate the 100–900 shades of my own custom colors?".

A great tool called Tailwind.ink could help you achieve that!

Change a specific color

Smooth DOC uses palette as base color. It is possible to change a palette color or a specific feature color. Example to change the code editor background color:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    'editor-background': 'purple',
  },
}

Personalize dark mode

Smooth DOC uses xstyled dark mode feature. An entry modes in colors gives you the opportunity to override colors for dark mode:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  colors: {
    ...baseTheme.colors,
    modes: {
      ...baseTheme.colors.modes,
      dark: {
        ...baseTheme.colors.modes.dark,
        'editor-background': 'white',
      },
    },
  },
}

Default colors

All default colors are available in theme definition.

Font

Change base font

By default Smooth DOC uses System Font Stack. You are free to customize it:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  fonts: {
    ...baseTheme.fonts,
    base: "'Comic Sans MS', sans-serif",
  },
}

Use Google Fonts

To use Google Fonts, install Gatsby Google Fonts plugin and use it:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-google-fonts',
      options: {
        fonts: [
          'source sans pro', // you can also specify font weights and styles
        ],
        display: 'swap',
      },
    },
  ],
}

You can now use it in your theme.js:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  fonts: {
    ...baseTheme.fonts,
    base: 'source sans pro',
  },
}

Prism Theme

Set prism-theme property to set a Prism theme:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'
import NightOwlTheme from 'prism-react-renderer/themes/nightOwl'

export const theme = {
  ...baseTheme,
  'prism-theme': NightOwlTheme,
}

You can also define a a custom theme:

// src/smooth-doc/theme.js
import { theme as baseTheme } from 'smooth-doc/src/theme'

export const theme = {
  ...baseTheme,
  'prism-theme': () => ({
    styles: [
      {
        types: ['variable', 'constant', 'deleted'],
        style: {
          color: 'rgb(224, 108, 117)',
        },
      },
      {
        types: ['punctuation', 'char', 'number'],
        style: {
          color: 'rgb(209, 154, 102)',
        },
      },
      {
        types: ['builtin', 'changed', 'namespace', 'class-name', 'tag'],
        style: {
          color: 'rgb(229, 192, 123)',
        },
      },
      {
        types: ['operator'],
        style: {
          color: 'rgb(171, 178, 191)',
        },
      },
      {
        types: ['inserted', 'string'],
        style: {
          color: 'rgb(152, 195, 121)',
        },
      },
      {
        types: ['attr-name', 'comment'],
        style: {
          fontStyle: 'italic',
        },
      },
      {
        types: ['function'],
        style: {
          color: 'rgb(97, 175, 239)',
        },
      },
      {
        types: ['keyword', 'selector'],
        style: {
          color: 'rgb(198, 120, 221)',
        },
      },
      {
        types: ['symbol'],
        style: {
          color: 'rgb(86, 182, 194)',
        },
      },
    ],
  }),
}