add dynamic theme

This commit is contained in:
marlon-erler
2026-09-17 20:03:55 +02:00
parent 839e887d85
commit 37d9016b83
13 changed files with 296 additions and 118 deletions
+12 -16
View File
@@ -172,14 +172,12 @@ body[theme=dark] [color]:not([color=standard]).subtle-background {
}
#background-wrapper {
position: fixed;
top: 0px;
left: var(--safe-area-left);
right: var(--safe-area-right);
bottom: 0px;
inset: -80px;
z-index: 1;
pointer-events: none;
overflow: hidden;
opacity: 0.4;
filter: blur(40px);
}
main {
z-index: 2;
@@ -187,24 +185,20 @@ main {
#background-wrapper div {
content: "";
position: absolute;
top: -80px;
left: -80px;
right: -80px;
bottom: -80px;
inset: 0px;
z-index: -1;
pointer-events: none;
filter: blur(40px);
}
#background-wrapper #sky {
left: -100%;
bottom: -50%;
--color-1: hsl(188, 100%, 83%);
--color-2: hsl(194, 72%, 56%);
background-image: radial-gradient(var(--color-1), var(--color-2));
background-image: radial-gradient(var(--sky-1), var(--sky-2));
}
#background-wrapper #grass-1 {
--color-1: hsl(150, 100%, 30%);
--color-2: hsl(150, 100%, 25%);
--color-1: hsl(150, 60%, 30%);
--color-2: hsl(150, 60%, 25%);
filter: var(--backdrop-grass-filter);
opacity: .7;
background-image:
linear-gradient(
350deg,
@@ -213,8 +207,10 @@ main {
transparent 40%);
}
#background-wrapper #grass-2 {
--color-1: hsl(110, 100%, 40%);
--color-2: hsl(110, 100%, 35%);
--color-1: hsl(110, 60%, 40%);
--color-2: hsl(110, 60%, 35%);
filter: var(--backdrop-grass-filter);
opacity: .7;
background-image:
linear-gradient(
9deg,