Merge pull request #1037 from Flying-Toast/prefers-color-scheme
Automatically use a dark theme according to 'prefers-color-scheme'
This commit is contained in:
commit
93c9ae5700
|
@ -150,6 +150,10 @@ The following configuration options are available:
|
||||||
files with the ones found in the specified folder.
|
files with the ones found in the specified folder.
|
||||||
- **default-theme:** The theme color scheme to select by default in the
|
- **default-theme:** The theme color scheme to select by default in the
|
||||||
'Change Theme' dropdown. Defaults to `light`.
|
'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
|
- **curly-quotes:** Convert straight quotes to curly quotes, except for those
|
||||||
that occur in code blocks and code spans. Defaults to `false`.
|
that occur in code blocks and code spans. Defaults to `false`.
|
||||||
- **mathjax-support:** Adds support for [MathJax](mathjax.md). Defaults to
|
- **mathjax-support:** Adds support for [MathJax](mathjax.md). Defaults to
|
||||||
|
@ -217,6 +221,7 @@ description = "The example book covers examples."
|
||||||
[output.html]
|
[output.html]
|
||||||
theme = "my-theme"
|
theme = "my-theme"
|
||||||
default-theme = "light"
|
default-theme = "light"
|
||||||
|
preferred-dark-theme = "navy"
|
||||||
curly-quotes = true
|
curly-quotes = true
|
||||||
mathjax-support = false
|
mathjax-support = false
|
||||||
google-analytics = "123456"
|
google-analytics = "123456"
|
||||||
|
|
|
@ -427,6 +427,9 @@ 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 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.
|
/// Use "smart quotes" instead of the usual `"` character.
|
||||||
pub curly_quotes: bool,
|
pub curly_quotes: bool,
|
||||||
/// Should mathjax be enabled?
|
/// Should mathjax be enabled?
|
||||||
|
|
|
@ -406,6 +406,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 => default_theme,
|
||||||
|
};
|
||||||
|
data.insert(
|
||||||
|
"preferred_dark_theme".to_owned(),
|
||||||
|
json!(preferred_dark_theme),
|
||||||
|
);
|
||||||
|
|
||||||
// Add google analytics tag
|
// Add google analytics tag
|
||||||
if let Some(ref ga) = html_config.google_analytics {
|
if let Some(ref ga) = html_config.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