Added documentation on custom colors

This commit is contained in:
squidfunk 2023-04-28 12:57:37 +02:00
parent 986cadad29
commit 4006b4f04d
2 changed files with 18 additions and 2 deletions

View File

@ -918,7 +918,8 @@
"grey", "grey",
"blue grey", "blue grey",
"black", "black",
"white" "white",
"custom"
] ]
}, },
"accent": { "accent": {
@ -945,7 +946,8 @@
"grey", "grey",
"blue grey", "blue grey",
"black", "black",
"white" "white",
"custom"
] ]
}, },
"icon": { "icon": {

View File

@ -105,6 +105,8 @@ Click on a tile to change the primary color:
}) })
</script> </script>
See our guide below to learn how to set [custom colors].
[Primary color support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0 [Primary color support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0
#### Accent color #### Accent color
@ -162,6 +164,8 @@ Click on a tile to change the accent color:
}) })
</script> </script>
See our guide below to learn how to set [custom colors].
[Accent color support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0 [Accent color support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.2.0
### Color palette toggle ### Color palette toggle
@ -323,6 +327,16 @@ properties). If you want to customize the colors beyond the palette (e.g. to
use your brand-specific colors), you can add an [additional style sheet] and use your brand-specific colors), you can add an [additional style sheet] and
tweak the values of the CSS variables. tweak the values of the CSS variables.
First, set the [`primary`][palette.primary] or [`accent`][palette.accent] values
in `mkdocs.yml` to `custom`, to signal to the theme that you want to define
custom colors, e.g., when you want to override the `primary` color:
``` yaml
theme:
palette:
primary: custom
```
Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" } Let's say you're :fontawesome-brands-youtube:{ style="color: #EE0F0F" }
__YouTube__, and want to set the primary color to your brand's palette. Just __YouTube__, and want to set the primary color to your brand's palette. Just
add: add: