Automatically use a dark theme according to 'prefers-color-scheme'
This commit is contained in:
parent
b4bb44292d
commit
b0ae14a2c7
|
@ -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?
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
Loading…
Reference in New Issue