Docs automatic light/dark mode (#6287)
Signed-off-by: Glenn Jocher <glenn.jocher@ultralytics.com> Co-authored-by: Sergiu Waxmann <47978446+sergiuwaxmann@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>pull/6323/head
Glenn Jocher
1 year ago
committed by
GitHub
parent
48e70f0921
commit
f767aa13ae
13 changed files with 239 additions and 78 deletions
@ -0,0 +1,49 @@ |
||||
// Function that applies light/dark theme based on the user's preference
|
||||
const applyAutoTheme = () => { |
||||
// Determine the user's preferred color scheme
|
||||
const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches; |
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; |
||||
|
||||
// Apply the appropriate attributes based on the user's preference
|
||||
if (prefersLight) { |
||||
document.body.setAttribute("data-md-color-scheme", "default"); |
||||
document.body.setAttribute("data-md-color-primary", "indigo"); |
||||
} else if (prefersDark) { |
||||
document.body.setAttribute("data-md-color-scheme", "slate"); |
||||
document.body.setAttribute("data-md-color-primary", "black"); |
||||
} |
||||
}; |
||||
|
||||
// Function that checks and applies light/dark theme based on the user's preference (if auto theme is enabled)
|
||||
function checkAutoTheme() { |
||||
// Retrieve the palette from local storage
|
||||
const palette = localStorage.getItem("/.__palette"); |
||||
if (palette) { |
||||
// Check if the palette's index is 0 (auto theme)
|
||||
const paletteObj = JSON.parse(palette); |
||||
if (paletteObj && paletteObj.index === 0) { |
||||
applyAutoTheme(); |
||||
} |
||||
} |
||||
} |
||||
// ! No need to run the function when the script loads as by default the theme is determined by the user's preference (if auto theme is enabled)
|
||||
// checkAutoTheme();
|
||||
// Run the function when the user's preference changes (when the user changes their system theme)
|
||||
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", checkAutoTheme); |
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", checkAutoTheme); |
||||
|
||||
// Re-run the function when the palette changes (e.g. user switched from dark theme to auto theme)
|
||||
// ! We can't use window.addEventListener("storage", checkAutoTheme) because it will NOT be triggered on the current tab
|
||||
// ! So we have to use the following workaround:
|
||||
// Get the palette input for auto theme
|
||||
var autoThemeInput = document.getElementById("__palette_1"); |
||||
if (autoThemeInput) { |
||||
// Add a click event listener to the input
|
||||
autoThemeInput.addEventListener("click", function () { |
||||
// Check if the auto theme is selected
|
||||
if (autoThemeInput.checked) { |
||||
// Re-run the function after a short delay (to ensure that the palette has been updated)
|
||||
setTimeout(applyAutoTheme); |
||||
} |
||||
}); |
||||
} |
||||
Loading…
Reference in new issue