fix backdrop

dist/index.css

@@ -9,7 +9,7 @@
   --surface-hover: hsla(var(--hue), 100%, 5%, 10%);
   --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
-body[theme=dark] [color]:not([color=standard]) {
+body:is([theme=dark], [theme=black]) [color]:not([color=standard]) {
   --accent-luma: var(--accent-luma-dark);
   --accent-text-luma: var(--accent-text-luma-dark);
   --surface: hsla(var(--hue), 100%, 95%, 5%);
@@ -32,7 +32,7 @@ body[theme=dark] [color]:not([color=standard]) {
   --surface-active: hsl(var(--hue), 100%, var(--active-luma));
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
-body[theme=dark] [color]:not([color=standard]).tile {
+body:is([theme=dark], [theme=black]) [color]:not([color=standard]).tile {
   --gradient-luma-1: 20%;
   --gradient-luma-2: 15%;
   --hover-luma: 25%;
@@ -61,7 +61,7 @@ body[theme=dark] [color]:not([color=standard]).tile {
     --sat: 100%;
     background: hsl(var(--hue), var(--sat), var(--luma), 20%);
   }
-  body[theme=dark] [color]:not([color=standard]).background {
+  body:is([theme=dark], [theme=black]) [color]:not([color=standard]).background {
     --luma: var(--background-luma-dark);
     --sat: 100%;
   }
@@ -69,13 +69,17 @@ body[theme=dark] [color]:not([color=standard]).tile {
     background: var(--surface);
   }
 }
-[color]:not([color=standard]).subtle-background {
+body [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
-body[theme=dark] [color]:not([color=standard]).subtle-background {
+body:is([theme=dark], [theme=black]) [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma-dark);
 }
+body[theme=black] * {
+  --subtle-luma: black !important;
+  --subtle-luma-dark: black !important;
+}
 [color=coral] {
   --hue: 20;
   --accent-luma: 50%;
@@ -172,10 +176,9 @@ body[theme=dark] [color]:not([color=standard]).subtle-background {
 }
 #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);
+  filter: blur(40px);
-  bottom: var(--safe-area-bottom);
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
@@ -188,8 +191,6 @@ main {
   content: "";
   position: absolute;
   inset: 0px;
-  transform: scale(1.2);
-  filter: blur(40px);
   z-index: -1;
   pointer-events: none;
 }

dist/index.js

@@ -373,7 +373,8 @@
         dynamic: "Dynamic",
         dark: "Dark",
         light: "Light",
-        system: "Device theme"
+        system: "Device theme",
+        black: "Black"
       },
       version: "Version",
       language: "Language",
@@ -620,7 +621,8 @@
           dynamic: "Dynamisch",
           dark: "Dunkel",
           light: "Hell",
-          system: "Ger\xE4teeinstellung"
+          system: "Ger\xE4teeinstellung",
+          black: "Schwarz"
         },
         version: "Version",
         language: "Sprache",
@@ -849,7 +851,8 @@
           dynamic: "Din\xE1mico",
           dark: "Oscuro",
           light: "Claro",
-          system: "Seg\xFAn dispositivo"
+          system: "Seg\xFAn dispositivo",
+          black: "Negro"
         },
         version: "Versi\xF3n",
         language: "Idioma",
@@ -1954,17 +1957,20 @@
       // view
       this.applyTheme = () => {
         let theme = this.theme.value;
-        if (theme == "dynamic" /* Dynamic */) {
+        if (theme == "system" /* System */)
+          theme = _SettingsViewModel.getSystemTheme();
+        switch (theme) {
+          case "dynamic" /* Dynamic */:
             const scene = this.selectDynamicScene();
             this.setScene(scene);
-          return;
+            break;
-        }
+          case "dark" /* Dark */:
-        if (theme == "system" /* System */) {
-          theme = _SettingsViewModel.getSystemTheme();
-        }
-        if (theme == "dark" /* Dark */) {
             this.setScene(DynamicSceneNight);
-        } else {
+            break;
+          case "black" /* Black */:
+            this.setScene(DynamicSceneBlack);
+            break;
+          default:
             this.setScene(DynamicSceneDay);
         }
       };
@@ -2082,6 +2088,14 @@
     brightness: 0.4,
     baseTheme: "dark" /* Dark */
   };
+  var DynamicSceneBlack = {
+    hue1: 0,
+    hue2: 0,
+    saturation: 0,
+    luma: 0,
+    brightness: 0,
+    baseTheme: "black" /* Black */
+  };
 
   // src/ViewModel/Global/fileTransferViewModel.ts
   var FileTransferViewModel = class extends Context {
@@ -7419,6 +7433,10 @@
           coreViewModel2.translations.settings.themes.dynamic,
           "dynamic" /* Dynamic */
         ],
+        [
+          coreViewModel2.translations.settings.themes.system,
+          "system" /* System */
+        ],
         [
           coreViewModel2.translations.settings.themes.dark,
           "dark" /* Dark */
@@ -7428,8 +7446,8 @@
           "light" /* Light */
         ],
         [
-          coreViewModel2.translations.settings.themes.system,
+          coreViewModel2.translations.settings.themes.black,
-          "system" /* System */
+          "black" /* Black */
         ]
       ]),
       settingsViewModel2.theme

dist/styles.css

@@ -84,7 +84,7 @@ body {
     --danger-active: #750e13;
 }
 
-body[theme="dark"] {
+body[theme="dark"], body[theme="black"] {
     --background: hsla(0, 0%, 9%, 100%);
     --background-glass: hsla(0, 0%, 9%, 20%);
     --background-transparent: hsla(0, 0%, 100%, 5%);
@@ -113,6 +113,11 @@ body[theme="dark"] {
     --link-hover: #a6c8ff;
 }
 
+body[theme="black"] {
+    --background: black;
+    --background-glass: hsla(0, 0%, 5%, 10%);
+}
+
 /* basic */
 body {
     background: black;

dist/sw.js

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

dist/version.txt

@@ -1 +1 @@
-2610 Beta 4.7
+2610 Beta 5.2

src/ViewModel/Global/settingsViewModel.ts

@@ -232,5 +232,5 @@ export const DynamicSceneBlack: DynamicScene = {
     saturation: 0,
     luma: 0,
     brightness: 0,
-    baseTheme: ThemeSettings.Dark,
+    baseTheme: ThemeSettings.Black,
 };

src/base.css

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

src/colors.css

@@ -12,7 +12,7 @@
     --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 
-body[theme="dark"] [color]:not([color="standard"]) {
+body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]) {
     --accent-luma: var(--accent-luma-dark);
     --accent-text-luma: var(--accent-text-luma-dark);
 
@@ -42,7 +42,7 @@ body[theme="dark"] [color]:not([color="standard"]) {
     --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
 
-body[theme="dark"] [color]:not([color="standard"]).tile {
+body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).tile {
     --gradient-luma-1: 20%;
     --gradient-luma-2: 15%;
 
@@ -80,7 +80,7 @@ body[theme="dark"] [color]:not([color="standard"]).tile {
         background: hsl(var(--hue), var(--sat), var(--luma), 20%);
     }
 
-    body[theme="dark"] [color]:not([color="standard"]).background {
+    body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).background {
         --luma: var(--background-luma-dark);
         --sat: 100%;
     }
@@ -91,15 +91,20 @@ body[theme="dark"] [color]:not([color="standard"]).tile {
 }
 
 /* subtle */
-[color]:not([color="standard"]).subtle-background {
+body [color]:not([color="standard"]).subtle-background {
     --luma: var(--subtle-luma);
     background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
 
-body[theme="dark"] [color]:not([color="standard"]).subtle-background {
+body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).subtle-background {
     --luma: var(--subtle-luma-dark);
 }
 
+body[theme="black"] * {
+    --subtle-luma: black !important;
+    --subtle-luma-dark: black !important;
+}
+
 /* definitions */
 [color="coral"] {
     --hue: 20;