Rollup merge of #61236 - GuillaumeGomez:system-theme, r=Mark-Simulacrum

take into account the system theme

Fixes #61079.

The CSS can now take into account the system theme. I used it to generate some content on the document and from there, if no theme has already been selected, it'll look at the system level theme.

r? @QuietMisdreavus
cc @fenhl
This commit is contained in:
Mazdak Farrokhzad 2019-08-21 17:31:38 +02:00 committed by GitHub
commit d034ccabe4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 4 deletions

View File

@ -914,7 +914,7 @@ themePicker.onblur = handleThemeButtonsBlur;
var but = document.createElement('button');
but.innerHTML = item;
but.onclick = function(el) {{
switchTheme(currentTheme, mainTheme, item);
switchTheme(currentTheme, mainTheme, item, true);
}};
but.onblur = handleThemeButtonsBlur;
themes.appendChild(but);

View File

@ -54,6 +54,21 @@
box-sizing: border-box;
}
/* This part handles the "default" theme being used depending on the system one. */
html {
content: "";
}
@media (prefers-color-scheme: light) {
html {
content: "light";
}
}
@media (prefers-color-scheme: dark) {
html {
content: "dark";
}
}
/* General structure and fonts */
body {

View File

@ -86,7 +86,7 @@ function getCurrentValue(name) {
return null;
}
function switchTheme(styleElem, mainStyleElem, newTheme) {
function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
var fullBasicCss = "rustdoc" + resourcesSuffix + ".css";
var fullNewTheme = newTheme + resourcesSuffix + ".css";
var newHref = mainStyleElem.href.replace(fullBasicCss, fullNewTheme);
@ -109,8 +109,18 @@ function switchTheme(styleElem, mainStyleElem, newTheme) {
});
if (found === true) {
styleElem.href = newHref;
updateLocalStorage("rustdoc-theme", newTheme);
// If this new value comes from a system setting or from the previously saved theme, no
// need to save it.
if (saveTheme === true) {
updateLocalStorage("rustdoc-theme", newTheme);
}
}
}
switchTheme(currentTheme, mainTheme, getCurrentValue("rustdoc-theme") || "light");
function getSystemValue() {
return getComputedStyle(document.documentElement).getPropertyValue('content');
}
switchTheme(currentTheme, mainTheme,
getCurrentValue("rustdoc-theme") || getSystemValue() || "light",
false);