From 78f8ff9943a9db07a12232d9d035cfa6ba1da391 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Fri, 25 Sep 2026 17:22:49 +0200 Subject: [PATCH] improve contrast --- dist/index.css | 19 +++++++++--------- dist/index.js | 8 ++++---- dist/sw.js | 2 +- dist/version.txt | 2 +- .../Global/.settingsViewModel.ts.swp | Bin 24576 -> 24576 bytes src/ViewModel/Global/settingsViewModel.ts | 8 ++++---- src/base.css | 10 ++++----- src/colors.css | 9 ++++----- 8 files changed, 28 insertions(+), 30 deletions(-) diff --git a/dist/index.css b/dist/index.css index 8ba3aa31..30f1638c 100644 --- a/dist/index.css +++ b/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; - --accent-luma: 50%; + --hue: 60; + --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-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, @@ -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, diff --git a/dist/index.js b/dist/index.js index 898d26d7..16d8fadd 100644 --- a/dist/index.js +++ b/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, - hue2: 220, + hue1: 220, + hue2: 250, saturation: 100, luma: 50, brightness: 0.8, diff --git a/dist/sw.js b/dist/sw.js index be86472f..1b77a135 100644 --- a/dist/sw.js +++ b/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; diff --git a/dist/version.txt b/dist/version.txt index 2cb28432..9f6583f0 100644 --- a/dist/version.txt +++ b/dist/version.txt @@ -1 +1 @@ -2610 Beta 5.3 +2610 Beta 5.4 diff --git a/src/ViewModel/Global/.settingsViewModel.ts.swp b/src/ViewModel/Global/.settingsViewModel.ts.swp index aa75f7ce4be846b19342aec23df0ffae8bc85226..a515b1c52b43957b1c7865732134b588a46d35b7 100644 GIT binary patch delta 926 zcmZoTz}RqrQ9j8a%+puFQqO<^2m}}yc2C@vb&Xw?AxDXUAw9EX;zretE`Jo5`j|I6 zDVj0WbJlWl)-o^x)iMFGiUgIflVKMa1xyWe7!-gYqcqjf jO2NozvR}B&?=a<`oUY8roKc!OIbK;zrzAfw)k?uop+><-hd}`f(n|A^OEUBG6pB+zg0m}~ z^KSZqVeIyjqEGvZ}w>nZthZ( s(`F3YyfW}C%j5!MmdScy5|ht`3P5T8%_qYyFm9GG{=u|)Vst(W0G(rVh5!Hn diff --git a/src/ViewModel/Global/settingsViewModel.ts b/src/ViewModel/Global/settingsViewModel.ts index 0a5523c6..6bfd98e0 100644 --- a/src/ViewModel/Global/settingsViewModel.ts +++ b/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, diff --git a/src/base.css b/src/base.css index 61f8500d..c85fe579 100644 --- a/src/base.css +++ b/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, diff --git a/src/colors.css b/src/colors.css index fd53ac2f..610ca5d4 100644 --- a/src/colors.css +++ b/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%;