Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-27 17:00:54 +01:00
Code Issues 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
Show Stats 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>
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

2
material/base.html
View File

@ -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">

2
src/base.html
View File

@ -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")