mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-18 17:12:23 -06:00
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!
61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
---
|
||
layout: default
|
||
title: Customization
|
||
nav_order: 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 }
|
||
|
||
```yaml
|
||
# Color scheme currently only supports "dark" or nil (default)
|
||
color_scheme: "dark"
|
||
```
|
||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||
|
||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||
|
||
## 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 }
|
||
|
||
```scss
|
||
// ...
|
||
//
|
||
// $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.
|
||
|
||
---
|