improve contrast

dist/index.css

@@ -59,11 +59,10 @@ body:is([theme=dark], [theme=black]) [color]:not([color=standard]).tile {
   [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 100%;
-    background: hsl(var(--hue), var(--sat), var(--luma), 20%);
+    background: hsl(var(--hue), var(--sat), var(--luma), 40%);
   }
   body:is([theme=dark], [theme=black]) [color]:not([color=standard]).background {
     --luma: var(--background-luma-dark);
-    --sat: 100%;
   }
   [color=standard].background {
     background: var(--surface);
@@ -71,7 +70,7 @@ body:is([theme=dark], [theme=black]) [color]:not([color=standard]).tile {
 }
 body [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
-  background: hsl(var(--hue), 100%, var(--luma), 50%);
+  background: hsl(var(--hue), 100%, var(--luma), 40%);
 }
 body:is([theme=dark], [theme=black]) [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma-dark);
@@ -92,8 +91,8 @@ body[theme=black] * {
   --subtle-luma-dark: 5%;
 }
 [color=yellow] {
-  --hue: 50;
+  --hue: 60;
-  --accent-luma: 50%;
+  --accent-luma: 60%;
   --accent-luma-dark: 60%;
   --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
@@ -198,16 +197,16 @@ main {
   left: -100%;
   bottom: -50%;
   background-image: radial-gradient(var(--sky-1), var(--sky-2));
-  opacity: 0.5;
+  opacity: 0.4;
 }
 body {
   transition: --sky-1 1s, --sky-2 5s;
 }
 #background-wrapper #grass-1 {
-  --color-1: hsl(150, 60%, 30%);
+  --color-1: hsl(104.61, 100%, 46.85%);
-  --color-2: hsl(150, 60%, 25%);
+  --color-2: hsl(37.43, 88.75%, 53.58%);
   filter: var(--backdrop-grass-filter);
-  opacity: 0.4;
+  opacity: 0.3;
   background-image:
     linear-gradient(
       350deg,
@@ -219,7 +218,7 @@ body {
   --color-1: hsl(110, 60%, 40%);
   --color-2: hsl(110, 60%, 35%);
   filter: var(--backdrop-grass-filter);
-  opacity: 0.4;
+  opacity: 0.3;
   background-image:
     linear-gradient(
       9deg,

dist/index.js

@@ -2066,15 +2066,15 @@
   };
   var DynamicSceneDay = {
     hue1: 190,
-    hue2: 180,
+    hue2: 230,
     saturation: 100,
     luma: 70,
-    brightness: 1.4,
+    brightness: 1.1,
     baseTheme: "light" /* Light */
   };
   var DynamicSceneAfternoon = {
-    hue1: 195,
+    hue1: 220,
-    hue2: 220,
+    hue2: 250,
     saturation: 100,
     luma: 50,
     brightness: 0.8,

dist/sw.js

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

dist/version.txt

@@ -1 +1 @@
-2610 Beta 5.3
+2610 Beta 5.4

src/ViewModel/Global/settingsViewModel.ts

@@ -204,15 +204,15 @@ export const DynamicSceneSunrise: DynamicScene = {
 };
 export const DynamicSceneDay: DynamicScene = {
     hue1: 190,
-    hue2: 180,
+    hue2: 230,
     saturation: 100,
     luma: 70,
-    brightness: 1.4,
+    brightness: 1.1,
     baseTheme: ThemeSettings.Light,
 };
 export const DynamicSceneAfternoon: DynamicScene = {
-    hue1: 195,
+    hue1: 220,
-    hue2: 220,
+    hue2: 250,
     saturation: 100,
     luma: 50,
     brightness: 0.8,

src/base.css

@@ -42,7 +42,7 @@ main {
 
     background-image: radial-gradient(var(--sky-1), var(--sky-2));
     
-    opacity: 0.5;
+    opacity: 0.4;
 }
 
 body {
@@ -52,11 +52,11 @@ body {
 }
 
 #background-wrapper #grass-1 {
-    --color-1: hsl(150, 60%, 30%);
+    --color-1: hsl(104.61, 100%, 46.85%);
-    --color-2: hsl(150, 60%, 25%);
+    --color-2: hsl(37.43, 88.75%, 53.58%);
 
     filter: var(--backdrop-grass-filter);
-    opacity: 0.4;
+    opacity: 0.3;
 
     background-image: linear-gradient(
         350deg,
@@ -71,7 +71,7 @@ body {
     --color-2: hsl(110, 60%, 35%);
 
     filter: var(--backdrop-grass-filter);
-    opacity: 0.4;
+    opacity: 0.3;
 
     background-image: linear-gradient(
         9deg,

src/colors.css

@@ -77,12 +77,11 @@ body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).tile {
     [color]:not([color="standard"]).background {
         --luma: var(--background-luma);
         --sat: 100%;
-        background: hsl(var(--hue), var(--sat), var(--luma), 20%);
+        background: hsl(var(--hue), var(--sat), var(--luma), 40%);
     }
 
     body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).background {
         --luma: var(--background-luma-dark);
-        --sat: 100%;
     }
 
     [color="standard"].background {
@@ -93,7 +92,7 @@ body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).tile {
 /* subtle */
 body [color]:not([color="standard"]).subtle-background {
     --luma: var(--subtle-luma);
-    background: hsl(var(--hue), 100%, var(--luma), 50%);
+    background: hsl(var(--hue), 100%, var(--luma), 40%);
 }
 
 body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).subtle-background {
@@ -123,9 +122,9 @@ body[theme="black"] * {
 }
 
 [color="yellow"] {
-    --hue: 50;
+    --hue: 60;
 
-    --accent-luma: 50%;
+    --accent-luma: 60%;
     --accent-luma-dark: 60%;
 
     --accent-text-luma: 0%;