mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 12:15:50 +00:00
e4ceb8b37b
During migration, while we launch Redocly with -d content, the static files need to be in content. Eventually, when we stop using -d, we need to move the files again. Previously: /assets : static assets used by templates /img : images used in documentation (mostly) Now: /content/static : static assets used by templates /img : images used in documentation (mostly) Eventually: /static : static assets used by templates /docs/img : images used in documentation
48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
// Check user prefers color, toggle light/dark, save state
|
|
// Based loosely on https://github.com/vinorodrigues/bootstrap-dark
|
|
|
|
function apply_color_scheme(theme) {
|
|
const disable_theme = (theme == "dark") ? "light" : "dark";
|
|
document.documentElement.classList.add(theme)
|
|
document.documentElement.classList.remove(disable_theme)
|
|
document.documentElement.setAttribute("data-theme", theme)
|
|
// $("#css-toggle-btn").prop( "checked", (theme == 'dark') );
|
|
}
|
|
|
|
function auto_update_theme() {
|
|
const upc = window.localStorage.getItem('user-prefers-color')
|
|
let theme = "dark"; // Default to dark theme
|
|
if (!upc) {
|
|
// User hasn't saved a preference specifically for this site; check
|
|
// the browser-level preferences.
|
|
if (window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: light)").matches) {
|
|
theme = "light"
|
|
}
|
|
} else { // Follow user's saved setting.
|
|
theme = (upc == "light") ? "light" : "dark"
|
|
}
|
|
apply_color_scheme(theme)
|
|
}
|
|
|
|
function user_toggle_theme() {
|
|
const new_theme = document.documentElement.classList.contains("dark") ? "light" : "dark"
|
|
window.localStorage.setItem("user-prefers-color", new_theme)
|
|
// Animate this style switch, but not the ones that happen on page load:
|
|
document.body.style.transition = "background-color .2s ease"
|
|
apply_color_scheme(new_theme)
|
|
}
|
|
|
|
auto_update_theme()
|
|
// update automatically if the user's theme preference changes
|
|
if (window.matchMedia) {
|
|
window.matchMedia("(prefers-color-scheme: dark)").addListener( auto_update_theme )
|
|
}
|
|
// Note: .addListener is considered deprecated, and is supposed to be updated to
|
|
// addEventListener("change", callback) instead; however, as recently as macOS
|
|
// High Sierra (~2017-2018) Safari does not support addEventListener here.
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
document.getElementById("css-toggle-btn").onclick = user_toggle_theme
|
|
})
|