mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rustdoc: remove old content hack for theme switching

Browse Source 
This is based on the compatibility data for `window.matchMedia` and
`MediaQueryList`'s `EventTarget` implementation.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia#browser_compatibility

  * EventTarget would require us to drop support for all Chrome
    versions before 39. However, we already require Chrome 49,
    because rustdoc requires [CSS variables].
  * EventTarget would also limit us to Firefox 55, but since #106502
    rustdoc only supports Firefox > 68.
  * EventTarget limits us to Mobile Safari version 14, but #102404
    shows that our CSS is broken in Safari versions before 15.5.

[CSS variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*#browser_compatibility
This commit is contained in:
Michael Howell 2023-03-23 14:25:43 -07:00
parent ba3d6055ad
commit 95ef91c573
2 changed files with 5 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/librustdoc/html/static/css/rustdoc.css
View File

@ -87,21 +87,6 @@
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 {

37
src/librustdoc/html/static/js/storage.js
View File

@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) {
}
const updateTheme = (function() {
// only listen to (prefers-color-scheme: dark) because light is the default
const mql = window.matchMedia("(prefers-color-scheme: dark)");
/**
* Update the current theme to match whatever the current combination of
* * the preference for using the system theme
@ -156,7 +159,7 @@ const updateTheme = (function() {
const lightTheme = getSettingValue("preferred-light-theme") || "light";
const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
if (isDarkMode()) {
if (mql.matches) {
use(darkTheme, true);
} else {
// prefers a light theme, or has no preference
@ -170,37 +173,7 @@ const updateTheme = (function() {
}
}
// This is always updated below to a function () => bool.
let isDarkMode;
// Determine the function for isDarkMode, and if we have
// `window.matchMedia`, set up an event listener on the preferred color
// scheme.
//
// Otherwise, fall back to the prefers-color-scheme value CSS captured in
// the "content" property.
if (window.matchMedia) {
// only listen to (prefers-color-scheme: dark) because light is the default
const mql = window.matchMedia("(prefers-color-scheme: dark)");
isDarkMode = () => mql.matches;
if (mql.addEventListener) {
mql.addEventListener("change", updateTheme);
} else {
// This is deprecated, see:
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
mql.addListener(updateTheme);
}
} else {
// fallback to the CSS computed value
const cssContent = getComputedStyle(document.documentElement)
.getPropertyValue("content");
// (Note: the double-quotes come from that this is a CSS value, which
// might be a length, string, etc.)
const cssColorScheme = cssContent || "\"light\"";
isDarkMode = () => (cssColorScheme === "\"dark\"");
}
mql.addEventListener("change", updateTheme);
return updateTheme;
})();