add black theme

dist/index.css

@@ -172,12 +172,13 @@ body[theme=dark] [color]:not([color=standard]).subtle-background {
 }
 #background-wrapper {
   position: fixed;
-  inset: 0px;
+  top: var(--safe-area-top);
-  transform: scale(1.2);
+  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);
 }
 main {
@@ -187,6 +188,8 @@ main {
   content: "";
   position: absolute;
   inset: 0px;
+  transform: scale(1.2);
+  filter: blur(40px);
   z-index: -1;
   pointer-events: none;
 }

dist/styles.css

@@ -16,7 +16,7 @@ html {
 
 /* 
 ANIMATION
-*/
+ */
 @keyframes slide-up {
     0% {
 	opacity: 0;
@@ -318,7 +318,7 @@ body {
 
 /*
 TYPE
-*/
+ */
 
 @font-face {
     font-family: IBM Plex Sans;
@@ -375,8 +375,8 @@ footer {
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
-        label.tile *
+label.tile *
-    ),
+),
 label.tile,
 select:not(label.tile *),
 textarea:not(label.tile *) {
@@ -392,8 +392,8 @@ hr {
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
-        label.tile *
+label.tile *
-    ):not(.no-outline),
+):not(.no-outline),
 label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
@@ -1013,7 +1013,7 @@ input[type="radio"]:checked::before {
 
 /*
 LAYOUT
-*/
+ */
 /* basic */
 body,
 html {
@@ -1021,8 +1021,12 @@ html {
     flex-direction: column-reverse;
 
     margin: 0px;
-    width: 100%;
+    
-    height: 100%;
+    position: fixed;
+    top: var(--safe-area-top);
+    left: var(--safe-area-left);
+    right: var(--safe-area-right);
+    bottom: var(--safe-area-bottom);
 }
 
 body,
@@ -1243,7 +1247,7 @@ main {
 
 /*
 STATE
-*/
+ */
 
 [highlight]:not(:hover):not(:active) {
     color: var(--highlight-color) !important;

dist/sw.js

@@ -1,4 +1,4 @@
-const VERSION = "2610 Beta 4.2"
+const VERSION = "2610 Beta 4.7"
 
 function processUrl(event) {
     const url = event.request.url;

dist/version.txt

@@ -1 +1 @@
-2610 Beta 4.2
+2610 Beta 4.7

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,
+		    coreViewModel.translations.settings.themes.black,
-		    ThemeSettings.System,
+		    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

@@ -55,19 +55,21 @@ export default class SettingsViewModel extends Context {
     applyTheme = (): void => {
 	let theme: string = this.theme.value;
 	
-        if (theme == ThemeSettings.Dynamic) {
+	if (theme == ThemeSettings.System)
+	    theme = SettingsViewModel.getSystemTheme();
+
+	switch (theme) {
+	    case ThemeSettings.Dynamic:
 		const scene = this.selectDynamicScene();
 		this.setScene(scene);
-            return;
+		break;
-        }
+	    case ThemeSettings.Dark:
-
-        if (theme == ThemeSettings.System) {
-            theme = SettingsViewModel.getSystemTheme();
-        }
-
-        if (theme == ThemeSettings.Dark) {
 		this.setScene(DynamicSceneNight);
-        } else {
+		break;
+	    case ThemeSettings.Black:
+		this.setScene(DynamicSceneBlack);
+		break;
+	    default: 
 		this.setScene(DynamicSceneDay);
 	}
     };
@@ -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;
-
+    top: var(--safe-area-top);
-    inset: 0px;
+    left: var(--safe-area-left);
-    transform: scale(1.2);
+    right: var(--safe-area-right);
+    bottom: var(--safe-area-bottom);
 
     z-index: 1;
     pointer-events: none;
 
     overflow: hidden;
 
-    filter: blur(40px);
-
     background: var(--background);
 }
 
@@ -33,6 +32,9 @@ main {
     position: absolute;
     inset: 0px;
     
+    transform: scale(1.2);
+    filter: blur(40px);
+
     z-index: -1;
     pointer-events: none;
 }