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

This commit is contained in:
Flying-Toast 2019-09-25 18:23:54 -04:00
parent b4bb44292d
commit b0ae14a2c7
3 changed files with 15 additions and 1 deletions

View File

@ -420,6 +420,11 @@ pub struct HtmlConfig {
pub theme: Option<PathBuf>, pub theme: Option<PathBuf>,
/// The default theme to use, defaults to 'light' /// The default theme to use, defaults to 'light'
pub default_theme: Option<String>, pub default_theme: Option<String>,
/// The default dark theme.
/// This theme will be used if the browser requests a dark theme
/// via the 'prefers-color-scheme' CSS media query.
/// Defaults to 'navy'.
pub preferred_dark_theme: Option<String>,
/// Use "smart quotes" instead of the usual `"` character. /// Use "smart quotes" instead of the usual `"` character.
pub curly_quotes: bool, pub curly_quotes: bool,
/// Should mathjax be enabled? /// Should mathjax be enabled?

View File

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

View File

@ -43,7 +43,7 @@
<!-- Provide site root to javascript --> <!-- Provide site root to javascript -->
<script type="text/javascript"> <script type="text/javascript">
var path_to_root = "{{ path_to_root }}"; 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> </script>
<!-- Work around some values being stored in localStorage wrapped in quotes --> <!-- Work around some values being stored in localStorage wrapped in quotes -->