Custom CSS, HTML, and JavaScript

Custom CSS

Customize your docs with CSS using either CSS variables or custom CSS rules. The most flexible is to use CSS variables.

For example: 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 expose global class names for you to use as selectors (prefixed with rm):

.rm-Header {
  background: #fff;
}

Typography

The recommended way to customize fonts is through the Typography section in your Theme settings. There you can choose from Google Fonts or upload custom font files for headings, body text, and code.

If you need further control, you can override the typeface throughout your docs through CSS variables:

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

Additional font family variables are available for more granular control:

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

This is not a comprehensive list of variables.

Global Classes

This is not a comprehensive list of classes.

Color Schemes

There are two selectors you should use when targeting dark mode styles. The first applies when the color scheme is set to system and a user is not toggling dark or light modes.

@media (prefers-color-scheme: dark) {
  [data-color-mode="system"] YOUR_SELECTOR {
    /* CSS goes here */
  }
}

The second selector to use is for users who want to use dark mode, even when their system is set to light:

[data-color-mode="dark"] YOUR_SELECTOR {
  /* CSS goes here */
}

That’s it! You’ll need to use both selectors for everything to work. Here’s an example with everything together, to change the background color of the “Try It” button:

.App .rm-TryIt {
  --TryIt-background: yellow;
}

@media (prefers-color-scheme: dark) {
  [data-color-mode="system"] .App .rm-TryIt {
    --TryIt-background: purple;
  }
}

[data-color-mode="dark"] .App .rm-TryIt {
  --TryIt-background: purple;
}

Custom Javascript

Your Javascript will be included at the bottom of the page.

Custom Include Tags

Header HTML

Any html here will be included in the head tag, which is good for things like meta tags and loading external CSS or JS.

Footer HTML
​
This will go right before the </body> tag. Good for things like analytics and tracking.

Toggling Custom Javascript and CSS

Add the ?disableCustomCss=true&disableCustomJs=true query params to the end of any URL.