## Customization Options

There are two ways to customize your docs. We recommend using CSS variables; it's the easiest and safest way to add customization to your docs.

If you want to change your header background, you can set the CSS variable like so:

ο»Ώ

The other option is to write custom CSS. We'll expose global class names for you to use as selectors (prefixed with `rm`):

ο»Ώ

:root vs body

Our CSS vars are targeted on the `:root` selector and load in after yours, so use the `body` selector to ensure your variables take priority!


ο»Ώ

## Changing Your Typeface

You can change the typeface throughout your docs through the `--font-family` variable.

ο»Ώ

If you’re using a service like Google Fonts, you'll need to include the `<link />` elements in your Custom HTML.


ο»Ώ

## Header

Some variables vary depending on the primary color of your header background (set in the Appearance page, if it's dark or light). You can base your CSS variable overrides on light or dark by doing:

ο»Ώ

### CSS Variables

NameDefault ValueDescription
`--Header-background``var(--color-primary)``--color-primary` is your header background from the Appearance page of the dash.
`--Header-border-color``rgba(0, 0, 0, 0.1)`ο»Ώ
`--Header-border-width``1px`ο»Ώ
`--Header-button-color`ο»Ώ
Color of button text in the header.
`--Header-button-hover`ο»Ώ
ο»Ώ
`--Header-button-active`ο»Ώ
ο»Ώ
`--Header-button-focus`ο»Ώ
ο»Ώ
`--Header-jumpTo-background``var(--color-primary-inverse)`ο»Ώ
`--Header-jumpTo-color``var(--color-primary)`ο»Ώ

### Global Classes

ο»Ώ

  1. `.rm-Header`

  2. `.rm-Logo`

  3. `.rm-Header-top-link`

  4. `.rm-Header-bottom-link`

  5. `.rm-SearchToggle`

  6. `.rm-Header-top-link_login`

Not pictured:

  • `.rm-JumpTo`

  • `.rm-Logo-img`


ο»Ώ

## Sidebar

### Global Classes

ο»Ώ

  1. `.rm-Sidebar`

  2. `.rm-Sidebar-link `

  3. `.rm-Sidebar-wrapper` (wraps both heading and list)

  4. `.rm-Sidebar-heading` (just the heading)

  5. `.rm-Sidebar-list` (just the list)


ο»Ώ

## Article

### Global Classes

ο»Ώ

  1. `.rm-APISectionHeader` (this selector is used in the Playground and will affect those too)

  2. `.rm-APILogInfo`

  3. `.rm-APILogsTable`

  4. `.rm-ParamContainer `

  5. `.rm-ParamInput` or `.rm-ParamSelect`

  6. `.rm-APIResponseSchemaPicker`

Not pictured:

  • `.rm-Pagination` (the wrapper for the Previous / Next Page navigation buttons located at the bottom of page)

## Playground

### CSS Variables

NameDefault ValueDescription
`--tryit-background``var(--color-primary, #118cfd)`Background color of the Try It button. `--color-primary` is your header background from the Appearance page of the dash.
`--tryit-background-hover``var(--color-primary-darken-10, #0272d9)`ο»Ώ
`--tryit-background-active``var(--color-primary-darken-20, #0158a7)`ο»Ώ
`--tryit-background-focus``var(--color-primary-alpha-25, rgba(17,140,253,0.25))`ο»Ώ
`--tryit-background-disabled``var(--color-primary-darken-20, #0158a7)`ο»Ώ
`--tryit-border-radius``var(--border-radius-lg)``--border-radius-lg` defaults to 7.5px.
`--tryit-color``var(--color-primary-inverse)`ο»Ώ
`--tryit-spinner-color``var(--color-primary-inverse)`ο»Ώ

### Global Classes

ο»Ώ

Language Picker:

  1. `.rm-LanguageButton`

  2. `.rm-LanguageButton-more`

  3. `.rm-APISectionHeader` (this selector is used in the Article and will affect those too)

  4. `.rm-PlaygroundRequest`

  5. `.rm-TryIt`

  6. `.rm-PlaygroundResponse`


ο»Ώ

## Global Variables

NameDefault Value
`--border-radius``5px`
`--border-radius-lg``calc(var(--border-radius) * 1.5)`
`--box-shadow-menu-light``0 5px 10px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.025), 0 1px 3px rgba(0,0,0,.025)`
`--box-shadow-pill``inset 0 1px 1px 0 rgba(255,255,255,.2), inset 0 -1px 2px 0 rgba(0,0,0,.2), 0 1px 2px 0 rgba(0,0,0,0.05)`
`--box-shadow-tooltip``0 1px 2px rgba(0,0,0,.05), inset 0 -1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.2)`
`--font-family``-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`
`--font-family-mono``"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace`
`--font-weight``500`
`--font-weight-bold``600`
`--transition-fast``.15s`
`--transition-slow``.3s`
`--transition-timing``cubic-bezier(.16,1,.3,1)`

## ReadMe Markdown

We also have several variables that are specific to [ReadMe Markdown (RDMD)](πŸ”—ο»Ώ), which is the Markdown engine that renders all of ReadMe's Markdown content. You can read about these variables and other tips for [customizing RDMD](πŸ”—ο»Ώ).