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 support for preference-based color schemes

Browse Source
This commit is contained in:
squidfunk 2020-06-07 14:24:48 +02:00
parent a4d6c783ab
commit 2491b23ade
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
material/base.html
View File

@ -86,6 +86,9 @@
{% else %} {% else %}
<body dir="{{ direction }}"> <body dir="{{ direction }}">
{% endif %} {% endif %}
{% if "prefers" == 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"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label> <label class="md-overlay" for="__drawer"></label>

8
src/base.html
View File

@ -180,6 +180,14 @@
<body dir="{{ direction }}"> <body dir="{{ direction }}">
{% endif %} {% endif %}
<!-- Experimental: set color scheme based on preference -->
{% if "prefers" == palette.scheme %}
<script>
if (matchMedia("(prefers-color-scheme: dark)").matches)
document.body.setAttribute("data-md-color-scheme", "slate")
</script>
{% endif %}
<!-- <!--
State toggles - we need to set autocomplete="off" in order to reset the State toggles - we need to set autocomplete="off" in order to reset the
drawer on back button invocation in some browsers drawer on back button invocation in some browsers