xmengnet/yacd
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update theme color meta on changing theme

Browse source
This commit is contained in:
Haishan 2022-08-27 17:37:29 +08:00
parent 96fc7b7998
commit 59d1e6fb80
1 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/store/app.ts
View file

@ -95,6 +95,45 @@ export function updateClashAPIConfig({ baseURL, secret }) {
const rootEl = document.querySelector('html');
type ThemeType = 'dark' | 'light' | 'auto';
function insertThemeColorMeta(color: string, media?: string) {
const meta0 = document.createElement('meta');
meta0.setAttribute('name', 'theme-color');
meta0.setAttribute('content', color);
if (media) meta0.setAttribute('media', media);
document.head.appendChild(meta0);
}
function updateMetaThemeColor(theme: ThemeType) {
const metas = Array.from(
document.querySelectorAll('meta[name=theme-color]')
) as HTMLMetaElement[];
let meta0: HTMLMetaElement;
for (const m of metas) {
if (!m.getAttribute('media')) {
meta0 = m;
} else {
document.head.removeChild(m);
}
}
if (theme === 'auto') {
insertThemeColorMeta('#eeeeee', '(prefers-color-scheme: light)');
insertThemeColorMeta('#202020', '(prefers-color-scheme: dark)');
if (meta0) {
document.head.removeChild(meta0);
} else {
return;
}
} else {
const color = theme === 'light' ? '#eeeeee' : '#202020';
if (!meta0) {
insertThemeColorMeta(color);
} else {
meta0.setAttribute('content', color);
}
}
}
function setTheme(theme: ThemeType = 'dark') {
if (theme === 'auto') {
rootEl.setAttribute('data-theme', 'auto');
@ -103,6 +142,7 @@ function setTheme(theme: ThemeType = 'dark') {
} else {
rootEl.setAttribute('data-theme', 'light');
}
updateMetaThemeColor(theme);
}
export function switchTheme(nextTheme = 'auto') {