notes/docs/customization.md

layout	title	nav_order
default	Customization	6

Customization

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

Color schemes

{: .d-inline-block }

New {: .label .label-green }

Just the Docs supports two color schemes: light (default), and dark.

To enable a color scheme, set the color_scheme parameter in your site's _config.yml file:

Example

{: .no_toc }

# Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark"

Preview dark color scheme

Specific visual customization

To customize your site’s aesthetic, open _sass/custom/custom.scss in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.

For example, to change the link color from the purple default to blue, open _sass/custom/custom.css and find the $link-color variable on line 50. Uncomment it, and change its value to our $blue-000 variable, or another shade of your choosing.

Example

{: .no_toc }

// ...
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
$link-color: $blue-000;
//
// ...

Note: Editing the variables directly in _sass/support/variables.scss is not recommended and can cause other dependencies to fail.

Override styles

For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit _sass/overrides.scss. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.

For example, if you'd like to add your own styles for printing a page, you could add the following styles.

Example

{: .no_toc }

// Print-only styles.
@media print {
  .side-bar, .page-header { display: none; }
  .main-content { max-width: auto; margin: 1em;}
}