Customizing Docs Using CSS Variables

📘

New

The info on this page applies to projects using our new designs.

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:

.App {
  --Header-background: #fff;
}

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

.rm-Header {
  background: #fff;
}

📘

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

.App {
  --font-family: 'Your Typeface';
}

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:

.ThemeContext_dark {
  --Header-button-color: #fff;
}

CSS Variables

NameDefault ValueDescription
--Header-backgroundvar(--color-primary)--color-primary is your header background from the Appearance page of the dash.
--Header-border-colorrgba(0, 0, 0, 0.1)
--Header-border-width1px
--Header-button-colorColor of button text in the header.
--Header-button-hover
--Header-button-active
--Header-button-focus
--Header-jumpTo-backgroundvar(--color-primary-inverse)
--Header-jumpTo-colorvar(--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-backgroundvar(--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-hovervar(--color-primary-darken-10, #0272d9)
--tryit-background-activevar(--color-primary-darken-20, #0158a7)
--tryit-background-focusvar(--color-primary-alpha-25, rgba(17,140,253,0.25))
--tryit-background-disabledvar(--color-primary-darken-20, #0158a7)
--tryit-border-radiusvar(--border-radius-lg)--border-radius-lg defaults to 7.5px.
--tryit-colorvar(--color-primary-inverse)
--tryit-spinner-colorvar(--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-radius5px
--border-radius-lgcalc(var(--border-radius) * 1.5)
--box-shadow-menu-light0 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-pillinset 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-tooltip0 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-weight500
--font-weight-bold600
--transition-fast.15s
--transition-slow.3s
--transition-timingcubic-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.


What's Next