Add support for "always theme" in setting

This commit is contained in:
Jacob Hoffman-Andrews 2022-01-07 18:21:08 -05:00
parent c4b994ff80
commit 04f04026c5
4 changed files with 47 additions and 10 deletions

View File

@ -421,6 +421,12 @@ fn settings(root_path: &str, suffix: &str, theme_names: Vec<String>) -> Result<S
"Theme preferences", "Theme preferences",
vec![ vec![
Setting::from(("use-system-theme", "Use system theme", true)), Setting::from(("use-system-theme", "Use system theme", true)),
Setting::Select {
js_data_name: "theme",
description: "Theme",
default_value: "light",
options: theme_names.clone(),
},
Setting::Select { Setting::Select {
js_data_name: "preferred-dark-theme", js_data_name: "preferred-dark-theme",
description: "Preferred dark theme", description: "Preferred dark theme",

View File

@ -1,15 +1,18 @@
// Local js definitions: // Local js definitions:
/* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */ /* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */
/* global addClass, removeClass */
(function () { (function () {
function changeSetting(settingName, value) { function changeSetting(settingName, value) {
updateLocalStorage("rustdoc-" + settingName, value); updateLocalStorage("rustdoc-" + settingName, value);
switch (settingName) { switch (settingName) {
case "theme":
case "preferred-dark-theme": case "preferred-dark-theme":
case "preferred-light-theme": case "preferred-light-theme":
case "use-system-theme": case "use-system-theme":
updateSystemTheme(); updateSystemTheme();
updateLightAndDark();
break; break;
} }
} }
@ -29,7 +32,32 @@
} }
} }
function showLightAndDark() {
addClass(document.getElementById("theme").parentElement.parentElement, "hidden");
removeClass(document.getElementById("preferred-light-theme").parentElement.parentElement,
"hidden");
removeClass(document.getElementById("preferred-dark-theme").parentElement.parentElement,
"hidden");
}
function hideLightAndDark() {
addClass(document.getElementById("preferred-light-theme").parentElement.parentElement,
"hidden");
addClass(document.getElementById("preferred-dark-theme").parentElement.parentElement,
"hidden");
removeClass(document.getElementById("theme").parentElement.parentElement, "hidden");
}
function updateLightAndDark() {
if (getSettingValue("use-system-theme") !== "false") {
showLightAndDark();
} else {
hideLightAndDark();
}
}
function setEvents() { function setEvents() {
updateLightAndDark();
onEachLazy(document.getElementsByClassName("slider"), function(elem) { onEachLazy(document.getElementsByClassName("slider"), function(elem) {
var toggle = elem.previousElementSibling; var toggle = elem.previousElementSibling;
var settingId = toggle.id; var settingId = toggle.id;

View File

@ -187,22 +187,25 @@ var updateSystemTheme = (function() {
var mql = window.matchMedia("(prefers-color-scheme: dark)"); var mql = window.matchMedia("(prefers-color-scheme: dark)");
function handlePreferenceChange(mql) { function handlePreferenceChange(mql) {
let use = function(theme) {
switchTheme(window.currentTheme, window.mainTheme, theme, true);
};
// maybe the user has disabled the setting in the meantime! // maybe the user has disabled the setting in the meantime!
if (getSettingValue("use-system-theme") !== "false") { if (getSettingValue("use-system-theme") !== "false") {
var lightTheme = getSettingValue("preferred-light-theme") || "light"; var lightTheme = getSettingValue("preferred-light-theme") || "light";
var darkTheme = getSettingValue("preferred-dark-theme") || "dark"; var darkTheme = getSettingValue("preferred-dark-theme") || "dark";
if (mql.matches) { if (mql.matches) {
// prefers a dark theme use(darkTheme);
switchTheme(window.currentTheme, window.mainTheme, darkTheme, true);
} else { } else {
// prefers a light theme, or has no preference // prefers a light theme, or has no preference
switchTheme(window.currentTheme, window.mainTheme, lightTheme, true); use(lightTheme);
} }
// note: we save the theme so that it doesn't suddenly change when // note: we save the theme so that it doesn't suddenly change when
// the user disables "use-system-theme" and reloads the page or // the user disables "use-system-theme" and reloads the page or
// navigates to another page // navigates to another page
} else {
use(getSettingValue("theme"));
} }
} }

View File

@ -1,12 +1,12 @@
goto: file://|DOC_PATH|/test_docs/struct.Foo.html goto: file://|DOC_PATH|/test_docs/struct.Foo.html
size: (433, 600) size: (433, 600)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})
click: (4, 240) // This is the position of the top doc comment toggle click: (4, 260) // This is the position of the top doc comment toggle
assert-attribute-false: (".top-doc", {"open": ""}) assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 240) click: (4, 260)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked. // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 240) click: (3, 260)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})
// Assert the position of the toggle on the top doc block. // Assert the position of the toggle on the top doc block.
@ -22,10 +22,10 @@ assert-position: (
// Now we do the same but with a little bigger width // Now we do the same but with a little bigger width
size: (600, 600) size: (600, 600)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})
click: (4, 240) // New Y position since all search elements are back on one line. click: (4, 260) // New Y position since all search elements are back on one line.
assert-attribute-false: (".top-doc", {"open": ""}) assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 240) click: (4, 260)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked. // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 240) click: (3, 260)
assert-attribute: (".top-doc", {"open": ""}) assert-attribute: (".top-doc", {"open": ""})