diff --git a/_includes/css/just-the-docs.scss.liquid b/_includes/css/just-the-docs.scss.liquid index 29d5690262444fa0599c31ab4106bc5988de0042..b1ae765de0b9bb2b113a8d40569056b09c6c9d9c 100644 --- a/_includes/css/just-the-docs.scss.liquid +++ b/_includes/css/just-the-docs.scss.liquid @@ -2,6 +2,7 @@ $logo: "{{ site.logo | relative_url }}"; {% endif %} @import "./support/support"; +@import "./color_schemes/light"; @import "./color_schemes/{{ include.color_scheme }}"; @import "./modules"; {% include css/custom.scss.liquid %} diff --git a/docs/customization.md b/docs/customization.md index ec9be2642eea51b11215b5b06f536620268511c3..f03d9e3175abe4672654f92c702267ebc8ed829f 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -58,6 +58,17 @@ You can add custom schemes. If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name) where you override theme variables to change colors, fonts, spacing, etc. +{: .note } +Since the default color scheme is `light`, your custom scheme is implicitly based on the variable settings used by the `light` scheme. + +If you want your custom scheme to be based on the `dark` scheme, you need to start your file with the following line: + +```scss +@import "./color_schemes/dark"; +``` + +You can define custom schemes based on other custom schemes in the same way. + Available variables are listed in the [\_variables.scss](https://github.com/just-the-docs/just-the-docs/tree/main/_sass/support/_variables.scss) file. For example, to change the link color from the purple default to blue, include the following inside your scheme file: