Custom CSS, HTML, and JavaScript

Set these in your project under Appearance → CSS, JS, HTML.

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 .rm-Header {
  --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 .rm-ReadMe {
  --font-family: 'Your Typeface';
}

Additional font family variables are available for more granular control. Set them on the same .App .rm-ReadMe selector:

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.

Your hub is a single-page app, so this script runs once when the hub first loads, not each time a reader moves to another page. To run code on every page, use the pageLoad event:

$(window).on('pageLoad', () => {
  // Runs on the first page load and after each navigation
});

Custom Include Tags

Head Tag

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

End of Body Tag
​
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.

This works in public view, for example in a private or incognito window. When you're logged in to ReadMe, your hub loads inside the editor's preview, which doesn't pick up these params.