eabe7b2585
This commit makes the dark mode preview feel a little more interactive and it also pulls some duplicated code into one file so that people like me aren't stumped when they are looking at the wrong page!
1.5 KiB
layout, title, nav_order
| layout | title | nav_order |
|---|---|---|
| default | Customization | 6 |
Customization
{: .no_toc }
Table of contents
{: .no_toc .text-delta }
- 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.