Skip to content

Commit 95ef91c

Browse files
committed
rustdoc: remove old content hack for theme switching
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
1 parent ba3d605 commit 95ef91c

File tree

2 files changed

+5
-47
lines changed

2 files changed

+5
-47
lines changed

src/librustdoc/html/static/css/rustdoc.css

-15
Original file line numberDiff line numberDiff line change
@@ -87,21 +87,6 @@
8787
box-sizing: border-box;
8888
}
8989

90-
/* This part handles the "default" theme being used depending on the system one. */
91-
html {
92-
content: "";
93-
}
94-
@media (prefers-color-scheme: light) {
95-
html {
96-
content: "light";
97-
}
98-
}
99-
@media (prefers-color-scheme: dark) {
100-
html {
101-
content: "dark";
102-
}
103-
}
104-
10590
/* General structure and fonts */
10691

10792
body {

src/librustdoc/html/static/js/storage.js

+5-32
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) {
137137
}
138138

139139
const updateTheme = (function() {
140+
// only listen to (prefers-color-scheme: dark) because light is the default
141+
const mql = window.matchMedia("(prefers-color-scheme: dark)");
142+
140143
/**
141144
* Update the current theme to match whatever the current combination of
142145
* * the preference for using the system theme
@@ -156,7 +159,7 @@ const updateTheme = (function() {
156159
const lightTheme = getSettingValue("preferred-light-theme") || "light";
157160
const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
158161

159-
if (isDarkMode()) {
162+
if (mql.matches) {
160163
use(darkTheme, true);
161164
} else {
162165
// prefers a light theme, or has no preference
@@ -170,37 +173,7 @@ const updateTheme = (function() {
170173
}
171174
}
172175

173-
// This is always updated below to a function () => bool.
174-
let isDarkMode;
175-
176-
// Determine the function for isDarkMode, and if we have
177-
// `window.matchMedia`, set up an event listener on the preferred color
178-
// scheme.
179-
//
180-
// Otherwise, fall back to the prefers-color-scheme value CSS captured in
181-
// the "content" property.
182-
if (window.matchMedia) {
183-
// only listen to (prefers-color-scheme: dark) because light is the default
184-
const mql = window.matchMedia("(prefers-color-scheme: dark)");
185-
186-
isDarkMode = () => mql.matches;
187-
188-
if (mql.addEventListener) {
189-
mql.addEventListener("change", updateTheme);
190-
} else {
191-
// This is deprecated, see:
192-
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
193-
mql.addListener(updateTheme);
194-
}
195-
} else {
196-
// fallback to the CSS computed value
197-
const cssContent = getComputedStyle(document.documentElement)
198-
.getPropertyValue("content");
199-
// (Note: the double-quotes come from that this is a CSS value, which
200-
// might be a length, string, etc.)
201-
const cssColorScheme = cssContent || "\"light\"";
202-
isDarkMode = () => (cssColorScheme === "\"dark\"");
203-
}
176+
mql.addEventListener("change", updateTheme);
204177

205178
return updateTheme;
206179
})();

0 commit comments

Comments
 (0)