HongChuang/ultralytics-ascend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

extra.js dark mode fix (#17707)

Browse source 
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
This commit is contained in:
Glenn Jocher 2024-11-22 00:38:55 +01:00 • committed by GitHub
parent d57781aec0
commit 9ca990c303
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

37
docs/overrides/javascript/extra.js
View file

@ -1,24 +1,39 @@
// Apply theme colors based on dark/light mode -------------------------------------------------------------------------
document.body.setAttribute('data-md-color-scheme', isDark ? 'slate' : 'default');
document.body.setAttribute('data-md-color-primary', isDark ? 'black' : 'indigo');
// Apply theme colors based on dark/light mode
const applyTheme = (isDark) => {
document.body.setAttribute(
"data-md-color-scheme",
isDark ? "slate" : "default",
);
document.body.setAttribute(
"data-md-color-primary",
isDark ? "black" : "indigo",
);
};
// Check and apply appropriate theme based on system/user preference
const checkTheme = () => {
const palette = JSON.parse(localStorage.getItem('.__palette') || '{}');
if (palette.index === 0) { // Auto mode is selected
applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
const palette = JSON.parse(localStorage.getItem(".__palette") || "{}");
if (palette.index === 0) {
// Auto mode is selected
applyTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
}
};
// Watch for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkTheme);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", checkTheme);
// Initialize theme handling on page load
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('__palette_1')?.addEventListener('change', e =>
e.target.checked && setTimeout(checkTheme)
);
document.addEventListener("DOMContentLoaded", () => {
// Watch for theme toggle changes
document
.getElementById("__palette_1")
?.addEventListener(
"change",
(e) => e.target.checked && setTimeout(checkTheme),
);
// Initial theme check
checkTheme();
});