OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added documentation for preference-based color scheme

Browse Source
This commit is contained in:
squidfunk
2020-06-15 09:17:28 +02:00
parent feda4ff29a
commit 143cb05e97
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/getting-started.md
View File

@@ -365,6 +365,16 @@ Click on a color name to change the color scheme of the theme:
}) })
</script> </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 ### Color palette
The Material Design [color palette][10] comes with 20 hues, all of which are The Material Design [color palette][10] comes with 20 hues, all of which are

2
material/base.html
View File

@@ -86,7 +86,7 @@
{% else %} {% else %}
<body dir="{{ direction }}"> <body dir="{{ direction }}">
{% endif %} {% 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> <script>matchMedia("(prefers-color-scheme: dark)").matches&&document.body.setAttribute("data-md-color-scheme","slate")</script>
{% endif %} {% endif %}
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">

2
src/base.html
View File

@@ -181,7 +181,7 @@
{% endif %} {% endif %}
<!-- Experimental: set color scheme based on preference --> <!-- Experimental: set color scheme based on preference -->
{% if "prefers" == palette.scheme %} {% if "preference" == palette.scheme %}
<script> <script>
if (matchMedia("(prefers-color-scheme: dark)").matches) if (matchMedia("(prefers-color-scheme: dark)").matches)
document.body.setAttribute("data-md-color-scheme", "slate") document.body.setAttribute("data-md-color-scheme", "slate")