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)',
},
},
],
}),
}