improve contrast

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,
-    hue2: 220,
+    hue1: 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-2: hsl(150, 60%, 25%);
+    --color-1: hsl(104.61, 100%, 46.85%);
+    --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%;