3083172d99
When the dark mode is default, or if you set the page to dark mode and then refresh, the content in "General Information" can't be seen. This PR fixes the problem.
87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
// Has to be in the head tag, otherwise a flicker effect will occur.
|
|
|
|
let toggleTheme = (theme) => {
|
|
if (theme == "dark") {
|
|
setTheme("light");
|
|
} else {
|
|
setTheme("dark");
|
|
}
|
|
};
|
|
|
|
let setTheme = (theme) => {
|
|
transTheme();
|
|
setHighlight(theme);
|
|
setGiscusTheme(theme);
|
|
|
|
if (theme) {
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
|
|
// Add class to tables.
|
|
let tables = document.getElementsByTagName("table");
|
|
for (let i = 0; i < tables.length; i++) {
|
|
if (theme == "dark") {
|
|
tables[i].classList.add("table-dark");
|
|
} else {
|
|
tables[i].classList.remove("table-dark");
|
|
}
|
|
}
|
|
} else {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
}
|
|
localStorage.setItem("theme", theme);
|
|
|
|
// Updates the background of medium-zoom overlay.
|
|
if (typeof medium_zoom !== "undefined") {
|
|
medium_zoom.update({
|
|
background:
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--global-bg-color"
|
|
) + "ee", // + 'ee' for trasparency.
|
|
});
|
|
}
|
|
};
|
|
|
|
let setHighlight = (theme) => {
|
|
if (theme == "dark") {
|
|
document.getElementById("highlight_theme_light").media = "none";
|
|
document.getElementById("highlight_theme_dark").media = "";
|
|
} else {
|
|
document.getElementById("highlight_theme_dark").media = "none";
|
|
document.getElementById("highlight_theme_light").media = "";
|
|
}
|
|
};
|
|
|
|
let setGiscusTheme = (theme) => {
|
|
function sendMessage(message) {
|
|
const iframe = document.querySelector("iframe.giscus-frame");
|
|
if (!iframe) return;
|
|
iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app");
|
|
}
|
|
|
|
sendMessage({
|
|
setConfig: {
|
|
theme: theme,
|
|
},
|
|
});
|
|
};
|
|
|
|
let transTheme = () => {
|
|
document.documentElement.classList.add("transition");
|
|
window.setTimeout(() => {
|
|
document.documentElement.classList.remove("transition");
|
|
}, 500);
|
|
};
|
|
|
|
let initTheme = (theme) => {
|
|
if (theme == null || theme == "null") {
|
|
const userPref = window.matchMedia;
|
|
if (userPref && userPref("(prefers-color-scheme: dark)").matches) {
|
|
theme = "dark";
|
|
}
|
|
}
|
|
|
|
setTheme(theme);
|
|
};
|
|
|
|
initTheme(localStorage.getItem("theme"));
|