add black theme

src/Model/Global/settingsModel.ts

@@ -107,4 +107,5 @@ export enum ThemeSettings {
     Light = "light",
     System = "system",
     Dynamic = "dynamic",
+    Black = "black",
 }

src/View/Modals/settingsModal.tsx

@@ -192,6 +192,10 @@ function SettingsAppearancePane(
 		    coreViewModel.translations.settings.themes.dynamic,
 		    ThemeSettings.Dynamic,
 		],
+		[
+		    coreViewModel.translations.settings.themes.system,
+		    ThemeSettings.System,
+		],
 		[
 		    coreViewModel.translations.settings.themes.dark,
 		    ThemeSettings.Dark,
@@ -201,8 +205,8 @@ function SettingsAppearancePane(
 		    ThemeSettings.Light,
 		],
 		[
-		    coreViewModel.translations.settings.themes.system,
-		    ThemeSettings.System,
+		    coreViewModel.translations.settings.themes.black,
+		    ThemeSettings.Black,
 		],
 	    ]),
 	    settingsViewModel.theme,

src/View/translations.ts

@@ -98,6 +98,7 @@ const englishTranslations = {
 	    dark: "Dark",
 	    light: "Light",
 	    system: "Device theme",
+	    black: "Black",
 	},
 
 	version: "Version",
@@ -442,6 +443,7 @@ export const allTranslations: {
 		dark: "Dunkel",
 		light: "Hell",
 		system: "Geräteeinstellung",
+		black: "Schwarz",
 	    },
 
 	    version: "Version",
@@ -754,6 +756,7 @@ export const allTranslations: {
 		dark: "Oscuro",
 		light: "Claro",
 		system: "Según dispositivo",
+		black: "Negro",
 	    },
 
 	    version: "Versión",

src/ViewModel/Global/settingsViewModel.ts

@@ -53,127 +53,129 @@ export default class SettingsViewModel extends Context {
 
     // view
     applyTheme = (): void => {
-        let theme: string = this.theme.value;
+	let theme: string = this.theme.value;
+	
+	if (theme == ThemeSettings.System)
+	    theme = SettingsViewModel.getSystemTheme();
 
-        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);
-        }
+	switch (theme) {
+	    case ThemeSettings.Dynamic:
+		const scene = this.selectDynamicScene();
+		this.setScene(scene);
+		break;
+	    case ThemeSettings.Dark:
+		this.setScene(DynamicSceneNight);
+		break;
+	    case ThemeSettings.Black:
+		this.setScene(DynamicSceneBlack);
+		break;
+	    default: 
+		this.setScene(DynamicSceneDay);
+	}
     };
 
     selectDynamicScene = (): DynamicScene => {
-        let hour = new Date().getHours();
+	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 {
-            return DynamicSceneSunset;
-        }
+	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 {
+	    return DynamicSceneSunset;
+	}
     };
 
     setScene = (scene: DynamicScene): void => {
-        document.body.style.setProperty(
-            "--backdrop-grass-filter",
-            `brightness(${scene.brightness})`,
-        );
+	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);
+	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);
+	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(),
-        );
-        const seconds = new Date().getSeconds();
-        const secondsUntilNewMinute = 60 - seconds;
-        setTimeout(() => {
-            setInterval(this.applyTheme, 1000 * 60);
-        }, secondsUntilNewMinute);
+	// 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 {
@@ -224,3 +226,11 @@ export const DynamicSceneSunset: DynamicScene = {
     brightness: 0.4,
     baseTheme: ThemeSettings.Dark,
 };
+export const DynamicSceneBlack: DynamicScene = {
+    hue1: 0,
+    hue2: 0,
+    saturation: 0,
+    luma: 0,
+    brightness: 0,
+    baseTheme: ThemeSettings.Dark,
+};

src/base.css

@@ -9,17 +9,16 @@
 /* Gradient */
 #background-wrapper {
     position: fixed;
-
-    inset: 0px;
-    transform: scale(1.2);
+    top: var(--safe-area-top);
+    left: var(--safe-area-left);
+    right: var(--safe-area-right);
+    bottom: var(--safe-area-bottom);
 
     z-index: 1;
     pointer-events: none;
 
     overflow: hidden;
 
-    filter: blur(40px);
-
     background: var(--background);
 }
 
@@ -32,6 +31,9 @@ main {
 
     position: absolute;
     inset: 0px;
+    
+    transform: scale(1.2);
+    filter: blur(40px);
 
     z-index: -1;
     pointer-events: none;