Customizing Docs Using CSS Variables

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

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

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

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.