Add support for "always theme" in setting
This commit is contained in:
parent
c4b994ff80
commit
04f04026c5
@ -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",
|
||||||
|
@ -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;
|
||||||
|
@ -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"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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": ""})
|
||||||
|
Loading…
x
Reference in New Issue
Block a user