Automatically use a dark theme according to 'prefers-color-scheme'

book-example/src/format/config.md

@@ -150,6 +150,10 @@ The following configuration options are available:
   files with the ones found in the specified folder.
 - **default-theme:** The theme color scheme to select by default in the
   'Change Theme' dropdown. Defaults to `light`.
+- **preferred-dark-theme:** The default dark theme. This theme will be used if
+  the browser requests the dark version of the site via the
+  ['prefers-color-scheme'](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+  CSS media query. Defaults to the same theme as `default-theme`.
 - **curly-quotes:** Convert straight quotes to curly quotes, except for those
   that occur in code blocks and code spans. Defaults to `false`.
 - **mathjax-support:** Adds support for [MathJax](mathjax.md). Defaults to
@@ -216,6 +220,7 @@ description = "The example book covers examples."
 [output.html]
 theme = "my-theme"
 default-theme = "light"
+preferred-dark-theme = "navy"
 curly-quotes = true
 mathjax-support = false
 google-analytics = "123456"

src/config.rs

@@ -420,6 +420,9 @@ pub struct HtmlConfig {
     pub theme: Option<PathBuf>,
     /// The default theme to use, defaults to 'light'
     pub default_theme: Option<String>,
+    /// The theme to use if the browser requests the dark version of the site.
+    /// Defaults to the same as 'default_theme'
+    pub preferred_dark_theme: Option<String>,
     /// Use "smart quotes" instead of the usual `"` character.
     pub curly_quotes: bool,
     /// Should mathjax be enabled?

src/renderer/html_handlebars/hbs_renderer.rs

@@ -407,6 +407,15 @@ fn make_data(
     };
     data.insert("default_theme".to_owned(), json!(default_theme));
 
+    let preferred_dark_theme = match html_config.preferred_dark_theme {
+        Some(ref theme) => theme,
+        None => default_theme,
+    };
+    data.insert(
+        "preferred_dark_theme".to_owned(),
+        json!(preferred_dark_theme),
+    );
+
     // Add google analytics tag
     if let Some(ref ga) = config.html_config().and_then(|html| html.google_analytics) {
         data.insert("google_analytics".to_owned(), json!(ga));

src/theme/index.hbs

@@ -43,7 +43,7 @@
         <!-- Provide site root to javascript -->
         <script type="text/javascript">
             var path_to_root = "{{ path_to_root }}";
-            var default_theme = "{{ default_theme }}";
+            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
         </script>
 
         <!-- Work around some values being stored in localStorage wrapped in quotes -->