summaryrefslogtreecommitdiff
path: root/source/js/script.ts
diff options
context:
space:
mode:
Diffstat (limited to 'source/js/script.ts')
-rw-r--r--source/js/script.ts60
1 files changed, 41 insertions, 19 deletions
diff --git a/source/js/script.ts b/source/js/script.ts
index bfc1d64..f184f2c 100644
--- a/source/js/script.ts
+++ b/source/js/script.ts
@@ -17,7 +17,7 @@ window.addEventListener("load", () => {
}
// Add header hover page class changer
- const colorman = (mode: SystemDarkmodePreference) => {
+ const colorman = (mode: SystemDarkmodePreference | null) => {
let clsname: string = ".auto-dark";
const elements: Element[] = Array.prototype.slice.call(
document.querySelectorAll(clsname), 0);
@@ -31,12 +31,12 @@ window.addEventListener("load", () => {
element?.classList.remove("is-dark");
}
})
- console.debug(`${clsname} class changed to ${enumModeToStringMode(mode)}`);
+ console.debug(`${clsname} class changed to ${enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null"}`);
}
darklistener.add(colorman);
// Add logo color selector
- const logoman = (mode: SystemDarkmodePreference) => {
+ const logoman = (mode: SystemDarkmodePreference | null) => {
const logo = document.getElementById("logo");
const darksrc = logo?.getAttribute("data-src-darkmode");
const lightsrc = logo?.getAttribute("data-src-lightmode");
@@ -44,12 +44,12 @@ window.addEventListener("load", () => {
return;
let src = (mode === SystemDarkmodePreference.dark) ? darksrc : lightsrc;
logo.setAttribute("src", src);
- console.debug(`logo src changed to ${enumModeToStringMode(mode)}src`);
+ console.debug(`logo src changed to ${enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light since mode == null"}`);
}
darklistener.add(logoman);
// Add player theme handler
- const playerman = (mode: SystemDarkmodePreference) => {
+ const playerman = (mode: SystemDarkmodePreference | null) => {
const shikwasa = document.body.querySelector('div[data-name="shikwasa"]');
shikwasa?.setAttribute("data-theme", enumModeToStringMode(mode) ? enumModeToStringMode(mode)! : "light");
console.debug(`shikwasa theme: ${shikwasa?.getAttribute("data-theme")}`);
@@ -76,23 +76,32 @@ const invertDarkModeObj: Object = {
'light': 'dark'
};
-const enumModeToStringMode = (i: SystemDarkmodePreference) => {
+const enumModeToStringMode = (i: SystemDarkmodePreference | null) => {
let keysArray = Object.keys(modeMap);
let result = keysArray.filter(key => isValidKey(key, modeMap) && modeMap[key] === i);
return result ? result[0] : undefined;
};
class DarkmodeListener {
- private _mode: SystemDarkmodePreference;
+ private _mode: SystemDarkmodePreference | null;
private _handlers: ((mode: SystemDarkmodePreference) => void)[];
public constructor() {
let darking = window.matchMedia('(prefers-color-scheme: dark)').matches;
- this._mode = darking ? SystemDarkmodePreference.dark : SystemDarkmodePreference.light;
+ this._mode = darking ? SystemDarkmodePreference.dark : null;
this._handlers = [];
}
public listen(): void {
+ let media = window.matchMedia('(prefers-color-scheme: dark)');
+ let callback = (event: MediaQueryListEvent) => {
+ let mode = event.matches ? SystemDarkmodePreference.dark : null;
+ applyCustomDarkModeSettings(mode);
+ setLS(darkModeStorageKey, enumModeToStringMode(mode!));
+ this._mode = mode;
+ };
+ media.addEventListener("change", callback);
+
const rootElement = document.documentElement;
const darkModeStorageKey = 'user-color-scheme';
const rootElementDarkModeAttributeName = 'data-user-color-scheme';
@@ -104,17 +113,26 @@ class DarkmodeListener {
}
// Partially taken from https://blog.skk.moe/post/hello-darkmode-my-old-friend, CC BY-NC-SA 4.0
- const applyCustomDarkModeSettings = (mode: any) => {
+ const applyCustomDarkModeSettings = (mode: SystemDarkmodePreference | null) => {
// 接受从「开关」处传来的模式，或者从 localStorage 读取
- let LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : 'light' ? SystemDarkmodePreference.light : null;
- let currentSetting: SystemDarkmodePreference = mode || LSSetting;
+ let LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : getLS(darkModeStorageKey) == 'light' ? SystemDarkmodePreference.light : null;
+ console.debug(`Got LSSetting: ${LSSetting}; mode: ${mode}`);
+ // 如果传入 mode != null (浏览器设置了prefers-color-scheme: dark)且 LocalStorage为空，则使用传入模式
+ let currentSetting: SystemDarkmodePreference | null;
+ if (mode != null && LSSetting == null) {
+ currentSetting = mode;
+ } else {
+ // 否则，使用 localStorage 中的设置（可能为 null！）
+ currentSetting = LSSetting;
+ }
console.debug(`applyCustomDarkModeSettings: ${currentSetting}`);
- if (currentSetting === this._mode) {
+ let prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? SystemDarkmodePreference.dark : null;
+ if (currentSetting == prefersColorScheme && currentSetting != null) {
// 当用户自定义的显示模式和 prefers-color-scheme 相同时重置、恢复到自动模式
resetRootDarkModeAttributeAndLS();
console.debug('Resetting to auto mode...');
} else if (currentSetting == SystemDarkmodePreference.dark || currentSetting == SystemDarkmodePreference.light) {
- // 否则设置为用户自定义的显示模式
+ // 否则设置为用户自定义的显示模式或传入的模式
rootElement.setAttribute(rootElementDarkModeAttributeName, enumModeToStringMode(currentSetting)!);
console.debug('Setting prop: "data-user-color-scheme" in HTML...');
} else {
@@ -146,12 +164,14 @@ class DarkmodeListener {
});
console.debug('Light theme applied.');
}
-
+ // 更新 this._mode
+ this._mode = currentSetting;
}
const toggleCustomDarkMode = () => {
let currentSetting = getLS(darkModeStorageKey);
if (currentSetting === null) {
+ // localStorage 啥都没有，从this._mode获取
let curMode = enumModeToStringMode(this._mode)!;
currentSetting = isValidKey(curMode, invertDarkModeObj) ? invertDarkModeObj[curMode] : currentSetting;
} else if (currentSetting == 'dark' || 'light') {
@@ -163,24 +183,26 @@ class DarkmodeListener {
}
// 将相反的模式写入 localStorage
setLS(darkModeStorageKey, currentSetting);
- return isValidKey(currentSetting!, invertDarkModeObj) ? modeMap[currentSetting!] : null;
+ // 更新 DarkmodeListener._mode
+ this._mode = isValidKey(currentSetting!, modeMap) ? modeMap[currentSetting!] : this._mode;
}
- applyCustomDarkModeSettings(null);
+ applyCustomDarkModeSettings(this._mode);
darkModeTogglebuttonElement?.addEventListener('click', () => {
// 当用户点击「开关」时，获得新的显示模式、写入 localStorage、并在页面上生效
console.debug('User clicked button. Doing black magic now...');
- applyCustomDarkModeSettings(toggleCustomDarkMode());
+ toggleCustomDarkMode();
+ applyCustomDarkModeSettings(this._mode);
});
}
- public add(callback: (mode: SystemDarkmodePreference) => void): void {
+ public add(callback: (mode: SystemDarkmodePreference | null) => void): void {
callback(this._mode);
this._handlers.push(callback);
}
- public mode(): SystemDarkmodePreference {
+ public mode(): SystemDarkmodePreference | null {
return this._mode;
}
};
Powered by cgit, Theme cgit-dark created by Ted Yin, updated by Mole Shang.