Added documentation for preference-based color scheme

squidfunk · squidfunk · commit 143cb05e9748 · 2020-06-15T09:17:28.000+02:00
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -365,6 +365,16 @@ Click on a color name to change the color scheme of the theme:
   })
 </script>
 
+The color scheme can also be set based on _user preference_, which makes use of
+the `prefers-color-scheme` media query. This can be done by adding the following
+to `mkdocs.yml`:
+
+``` yaml
+theme:
+  palette:
+    scheme: preference
+```
+
 ### Color palette
 
 The Material Design [color palette][10] comes with 20 hues, all of which are
diff --git a/material/base.html b/material/base.html
@@ -86,7 +86,7 @@
   {% else %}
     <body dir="{{ direction }}">
   {% endif %}
-    {% if "prefers" == palette.scheme %}
+    {% if "preference" == palette.scheme %}
       <script>matchMedia("(prefers-color-scheme: dark)").matches&&document.body.setAttribute("data-md-color-scheme","slate")</script>
     {% endif %}
     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
diff --git a/src/base.html b/src/base.html
@@ -181,7 +181,7 @@
   {% endif %}
 
     <!-- Experimental: set color scheme based on preference -->
-    {% if "prefers" == palette.scheme %}
+    {% if "preference" == palette.scheme %}
       <script>
         if (matchMedia("(prefers-color-scheme: dark)").matches)
           document.body.setAttribute("data-md-color-scheme", "slate")
