123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk"]
|
|
const FORCED_DARK_DESIGN_THEMES = new Set(["terminal", "cyberpunk"])
|
|
const THEME_BEFORE_FORCED_KEY = "themeBeforeForcedDark"
|
|
|
|
export function getInitialTheme() {
|
|
const savedTheme = localStorage.getItem("theme")
|
|
if (savedTheme) {
|
|
return savedTheme
|
|
}
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light"
|
|
}
|
|
|
|
export function setTheme(theme) {
|
|
document.documentElement.setAttribute("data-theme", theme)
|
|
localStorage.setItem("theme", theme)
|
|
}
|
|
|
|
export function toggleTheme() {
|
|
const designTheme =
|
|
document.documentElement.getAttribute("data-design-theme") || "fluent"
|
|
if (FORCED_DARK_DESIGN_THEMES.has(designTheme)) return
|
|
const currentTheme =
|
|
document.documentElement.getAttribute("data-theme") || "light"
|
|
const newTheme = currentTheme === "dark" ? "light" : "dark"
|
|
setTheme(newTheme)
|
|
}
|
|
|
|
export function getInitialDesignTheme() {
|
|
const savedDesignTheme = localStorage.getItem("designTheme")
|
|
if (savedDesignTheme && DESIGN_THEMES.includes(savedDesignTheme)) {
|
|
return savedDesignTheme
|
|
}
|
|
return "fluent"
|
|
}
|
|
|
|
export function setDesignTheme(designTheme, themeToggle) {
|
|
const safeDesignTheme = DESIGN_THEMES.includes(designTheme)
|
|
? designTheme
|
|
: "fluent"
|
|
const previousDesignTheme =
|
|
document.documentElement.getAttribute("data-design-theme") || "fluent"
|
|
document.documentElement.setAttribute("data-design-theme", safeDesignTheme)
|
|
localStorage.setItem("designTheme", safeDesignTheme)
|
|
|
|
const willForceDark = FORCED_DARK_DESIGN_THEMES.has(safeDesignTheme)
|
|
const didForceDark = FORCED_DARK_DESIGN_THEMES.has(previousDesignTheme)
|
|
|
|
if (willForceDark) {
|
|
if (!didForceDark) {
|
|
const currentTheme =
|
|
document.documentElement.getAttribute("data-theme") || "light"
|
|
localStorage.setItem(THEME_BEFORE_FORCED_KEY, currentTheme)
|
|
}
|
|
setTheme("dark")
|
|
} else if (didForceDark) {
|
|
const restoreTheme =
|
|
localStorage.getItem(THEME_BEFORE_FORCED_KEY) ||
|
|
localStorage.getItem("themeBeforeTerminal")
|
|
if (restoreTheme === "dark" || restoreTheme === "light") {
|
|
setTheme(restoreTheme)
|
|
}
|
|
localStorage.removeItem(THEME_BEFORE_FORCED_KEY)
|
|
localStorage.removeItem("themeBeforeTerminal")
|
|
}
|
|
|
|
if (themeToggle) {
|
|
themeToggle.disabled = willForceDark
|
|
themeToggle.setAttribute("aria-disabled", willForceDark ? "true" : "false")
|
|
themeToggle.tabIndex = willForceDark ? -1 : 0
|
|
}
|
|
}
|
|
|
|
export function setSelectedDesignThemeUI({
|
|
designThemeList,
|
|
designThemeButton,
|
|
designTheme,
|
|
getLabel,
|
|
}) {
|
|
if (!designThemeList) return
|
|
const options = [...designThemeList.querySelectorAll('[role="option"]')]
|
|
options.forEach((el) => {
|
|
el.setAttribute(
|
|
"aria-selected",
|
|
el.getAttribute("data-value") === designTheme ? "true" : "false",
|
|
)
|
|
})
|
|
if (designThemeButton) {
|
|
designThemeButton.textContent = getLabel(designTheme)
|
|
}
|
|
}
|
|
|
|
export function setDesignThemeMenuOpen({
|
|
designThemeButton,
|
|
designThemeList,
|
|
open,
|
|
}) {
|
|
if (!designThemeButton || !designThemeList) return
|
|
designThemeButton.setAttribute("aria-expanded", open ? "true" : "false")
|
|
designThemeList.hidden = !open
|
|
if (open) {
|
|
designThemeList.focus()
|
|
}
|
|
}
|
|
|
|
export function getCurrentDesignTheme() {
|
|
return document.documentElement.getAttribute("data-design-theme") || "fluent"
|
|
}
|
|
|
|
export function updateDesignThemeOptions({
|
|
designThemeList,
|
|
getLabel,
|
|
language,
|
|
}) {
|
|
if (!designThemeList) return
|
|
const options = [...designThemeList.querySelectorAll('[role="option"]')]
|
|
options.forEach((el) => {
|
|
const value = el.getAttribute("data-value")
|
|
el.textContent = getLabel(value, language)
|
|
})
|
|
}
|