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
