From 4006b4f04d83ebb20ff095d39457a9a17ad33cae Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Fri, 28 Apr 2023 12:57:37 +0200
Subject: [PATCH] Added documentation on custom colors

---
 docs/schema/theme.json            |  6 ++++--
 docs/setup/changing-the-colors.md | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

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:
   })
 </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
 
 #### Accent color
@@ -162,6 +164,8 @@ Click on a tile to change the accent color:
   })
 </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
 
 ### 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: