diff --git a/docs/schema/theme.json b/docs/schema/theme.json index 9f51b902f..e1f37b42d 100644 --- a/docs/schema/theme.json +++ b/docs/schema/theme.json @@ -918,7 +918,8 @@ "grey", "blue grey", "black", - "white" + "white", + "custom" ] }, "accent": { @@ -945,7 +946,8 @@ "grey", "blue grey", "black", - "white" + "white", + "custom" ] }, "icon": { diff --git a/docs/setup/changing-the-colors.md b/docs/setup/changing-the-colors.md index 07106b8eb..af16f0d7b 100644 --- a/docs/setup/changing-the-colors.md +++ b/docs/setup/changing-the-colors.md @@ -105,6 +105,8 @@ Click on a tile to change the primary color: }) +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 #### Accent color @@ -162,6 +164,8 @@ Click on a tile to change the accent color: }) +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 ### 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 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" } __YouTube__, and want to set the primary color to your brand's palette. Just add: