Move platform dependent code to Platform

This commit is contained in:
RMidhunSuresh 2022-05-11 15:38:37 +05:30
parent c26dc04b52
commit 174adc0755
2 changed files with 16 additions and 5 deletions

View file

@ -38,7 +38,7 @@ import {downloadInIframe} from "./dom/download.js";
import {Disposables} from "../../utils/Disposables"; import {Disposables} from "../../utils/Disposables";
import {parseHTML} from "./parsehtml.js"; import {parseHTML} from "./parsehtml.js";
import {handleAvatarError} from "./ui/avatar"; import {handleAvatarError} from "./ui/avatar";
import {ThemeLoader} from "./ThemeLoader"; import {ThemeLoader, COLOR_SCHEME_PREFERENCE} from "./ThemeLoader";
function addScript(src) { function addScript(src) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
@ -316,6 +316,15 @@ export class Platform {
return this._themeLoader; return this._themeLoader;
} }
get preferredColorScheme() {
if (window.matchMedia("(prefers-color-scheme: dark)")) {
return COLOR_SCHEME_PREFERENCE.DARK;
} else if (window.matchMedia("(prefers-color-scheme: light)")) {
return COLOR_SCHEME_PREFERENCE.LIGHT;
}
return undefined;
}
replaceStylesheet(newPath) { replaceStylesheet(newPath) {
const head = document.querySelector("head"); const head = document.querySelector("head");
// remove default theme // remove default theme

View file

@ -16,6 +16,8 @@ limitations under the License.
import type {Platform} from "./Platform.js"; import type {Platform} from "./Platform.js";
export enum COLOR_SCHEME_PREFERENCE { DARK, LIGHT, }
export class ThemeLoader { export class ThemeLoader {
private _platform: Platform; private _platform: Platform;
private _themeMapping: Record<string, string> = {}; private _themeMapping: Record<string, string> = {};
@ -64,12 +66,12 @@ export class ThemeLoader {
return theme; return theme;
} }
// return default theme // return default theme
if (window.matchMedia) { const preference = this._platform.preferredColorScheme;
if (window.matchMedia("(prefers-color-scheme: dark)")) { switch (preference) {
case COLOR_SCHEME_PREFERENCE.DARK:
return this._platform.config["defaultTheme"].dark; return this._platform.config["defaultTheme"].dark;
} else if (window.matchMedia("(prefers-color-scheme: light)")) { case COLOR_SCHEME_PREFERENCE.LIGHT:
return this._platform.config["defaultTheme"].light; return this._platform.config["defaultTheme"].light;
}
} }
return undefined; return undefined;
} }