add dynamic theme

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.09.09.A";
+    readonly BUILD = "Build 26.09.17.A";
 
     translations: Translations;
 

src/ViewModel/Global/settingsViewModel.ts

@@ -48,74 +48,168 @@ export default class SettingsViewModel extends Context {
     };
 
     showModalPage = (page: SettingsModalPages): void => {
-        this.selectedModalPage.value = page;
+	this.selectedModalPage.value = page;
     };
 
     // view
     applyTheme = (): void => {
-        let theme: string = this.theme.value;
-        if (theme == ThemeSettings.System) {
-            theme = SettingsViewModel.getSystemTheme();
-        }
-        document.body.setAttribute("theme", theme);
+	let theme: string = this.theme.value;
+
+	if (theme == ThemeSettings.Dynamic) {
+	    const scene = this.selectDynamicScene();
+	    this.setScene(scene);
+	    return;
+	}
+
+	if (theme == ThemeSettings.System) {
+	    theme = SettingsViewModel.getSystemTheme();
+	}
+
+	if (theme == ThemeSettings.Dark) {
+	    this.setScene(DynamicSceneNight);
+	} else {
+	    this.setScene(DynamicSceneDay);
+	}
     };
 
+    selectDynamicScene = (): DynamicScene => {
+	let hour = new Date().getHours();
+
+	if (hour >= 21 || hour <= 6) {
+	    return DynamicSceneNight;
+	} else if (hour > 6 && hour < 10) {
+	    return DynamicSceneSunrise;
+	} else if (hour < 14) {
+	    return DynamicSceneDay;
+	} else if (hour < 17) {
+	    return DynamicSceneAfternoon
+	} else if (hour < 21) {
+	    return DynamicSceneSunset
+	}
+    }
+
+    setScene = (scene: DynamicScene): void => {
+	document.body.style.setProperty("--backdrop-grass-filter", `brightness(${scene.brightness})`);
+
+	function setSkyColor(tone: 1|2, hue: number, saturation: number, luma: number) {
+	    document.body.style.setProperty(`--sky-${tone}`, `hsl(${hue}, ${saturation}%, ${luma}%)`);
+	}
+	setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
+	setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma-10);
+
+	document.body.setAttribute("theme", scene.baseTheme);
+    }
+
     // exit
     close = (): void => {
-        this.coreViewModel.closeContext(this.contextId);
+	this.coreViewModel.closeContext(this.contextId);
     };
 
     handleContextClose = (): void => {
-        this.isShowingSettingsModal.value = false;
-        if (this.requiresReload.value == true) {
-            window.location.reload();
-        }
+	this.isShowingSettingsModal.value = false;
+	if (this.requiresReload.value == true) {
+	    window.location.reload();
+	}
     };
 
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
-        super("settings");
+	super("settings");
 
-        this.username.value = coreViewModel.settingsModel.username;
-        this.usernameInput.value = coreViewModel.settingsModel.username;
-        this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
-        this.language.value = coreViewModel.settingsModel.language;
-        this.theme.value = coreViewModel.settingsModel.theme;
+	this.username.value = coreViewModel.settingsModel.username;
+	this.usernameInput.value = coreViewModel.settingsModel.username;
+	this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+	this.language.value = coreViewModel.settingsModel.language;
+	this.theme.value = coreViewModel.settingsModel.theme;
 
-        // subscriptions
-        this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
-        this.language.subscribeSilent((newValue) => {
-            this.coreViewModel.settingsModel.setLanguage(newValue);
-            this.requiresReload.value = true;
-        });
-        this.theme.subscribeSilent((newValue) => {
-            this.coreViewModel.settingsModel.setTheme(newValue);
-        });
+	// subscriptions
+	this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+	this.language.subscribeSilent((newValue) => {
+	    this.coreViewModel.settingsModel.setLanguage(newValue);
+	    this.requiresReload.value = true;
+	});
+	this.theme.subscribeSilent((newValue) => {
+	    this.coreViewModel.settingsModel.setTheme(newValue);
+	});
 
-        // set theme
-        this.theme.subscribe(() => {
-            this.applyTheme();
-        });
-        SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
-            this.applyTheme(),
-        );
+	// set theme
+	this.theme.subscribe(() => {
+	    this.applyTheme();
+	});
+	SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
+	    this.applyTheme(),
+	);
+	const seconds = new Date().getSeconds();
+	const secondsUntilNewMinute = 60-seconds;
+	setTimeout(() => {
+	    setInterval(this.applyTheme, 1000*60);
+	}, secondsUntilNewMinute);
 
-        // keystrokes
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
+	// keystrokes
+	this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 
     static generateThemeMedia(): MediaQueryList {
-        return window.matchMedia("(prefers-color-scheme: dark)");
+	return window.matchMedia("(prefers-color-scheme: dark)");
     }
 
     static getSystemTheme(): string {
-        const media = SettingsViewModel.generateThemeMedia();
-        return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
+	const media = SettingsViewModel.generateThemeMedia();
+	return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
     }
 }
 
 export enum SettingsModalPages {
     Appearance,
-    Regional,
-    Info,
+	Regional,
+	Info,
+}
+
+export interface DynamicScene {
+    hue1: number;
+    hue2: number;
+    saturation: number;
+    luma: number;
+    brightness: number;
+    baseTheme: ThemeSettings;
+}
+export const DynamicSceneNight: DynamicScene = {
+    hue1: 215,
+    hue2: 220,
+    saturation : 50,
+    luma: 25,
+    brightness: 0.4,
+    baseTheme: ThemeSettings.Dark,
+}
+export const DynamicSceneSunrise: DynamicScene = {
+    hue1: 45,
+    hue2: 190,
+    saturation : 100,
+    luma: 50,
+    brightness: 1.2,
+    baseTheme: ThemeSettings.Light,
+}
+export const DynamicSceneDay: DynamicScene = {
+    hue1: 190,
+    hue2: 180,
+    saturation : 100,
+    luma: 70,
+    brightness: 1.4,
+    baseTheme: ThemeSettings.Light,
+}
+export const DynamicSceneAfternoon: DynamicScene = {
+    hue1: 195,
+    hue2: 220,
+    saturation : 100,
+    luma: 50,
+    brightness: 0.8,
+    baseTheme: ThemeSettings.Light,
+}
+export const DynamicSceneSunset: DynamicScene = {
+    hue1: 20,
+    hue2: 260,
+    saturation : 100,
+    luma: 50,
+    brightness: 0.4,
+    baseTheme: ThemeSettings.Dark,
 }