From 2491b23ade222d58274326d6d2a92cbd89f3c836 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sun, 7 Jun 2020 14:24:48 +0200
Subject: [PATCH] Added support for preference-based color schemes

---
 material/base.html | 3 +++
 src/base.html      | 8 ++++++++
 2 files changed, 11 insertions(+)
diff --git a/material/base.html b/material/base.html
index d4aa8d868..4fb660c88 100644
--- a/material/base.html
+++ b/material/base.html
@@ -86,6 +86,9 @@
   {% else %}
     <body dir="{{ direction }}">
   {% 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="search" type="checkbox" id="__search" autocomplete="off">
     <label class="md-overlay" for="__drawer"></label>
diff --git a/src/base.html b/src/base.html
index 5ad3913a9..4feb40762 100644
--- a/src/base.html
+++ b/src/base.html
@@ -180,6 +180,14 @@
     <body dir="{{ direction }}">
   {% 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
       drawer on back button invocation in some browsers
