frontend/utils/loadPreferredThemes.ts
Temmie 3866ced880
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
feat: default to light mode if the browser prefers light mode
2025-08-05 03:07:32 +02:00

52 lines
No EOL
1.4 KiB
TypeScript

let styleLinkElement: HTMLLinkElement | null;
let layoutLinkElement: HTMLLinkElement | null;
export default function loadPreferredThemes() {
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL;
let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
if (!currentStyle) {
if (prefersLight()) {
currentStyle = `${baseURL}themes/style/light.css`
} else {
currentStyle = `${baseURL}themes/style/dark.css`
}
}
if (styleLinkElement) {
styleLinkElement.href = currentStyle;
} else {
createStyleHead("style-theme", currentStyle)
styleLinkElement = document.getElementById('style-theme') as HTMLLinkElement;
}
if (layoutLinkElement) {
layoutLinkElement.href = currentLayout;
} else {
createStyleHead("style-layout", currentLayout)
layoutLinkElement = document.getElementById('style-layout') as HTMLLinkElement;
}
}
// create a new theme link if one doesn't already exist
function createStyleHead(id: string, themeUrl: string) {
useHead({
link: [{
id: id,
rel: "stylesheet",
href: themeUrl
}]
})
}
function prefersLight(): boolean {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
return true
}
return false
}