improve ui

dist/index.css

@@ -1,18 +1,4 @@
 /* src/base.css */
-#home-page {
-  --background-transparent: hsla(0, 0%, 100%, 40%);
-  --surface: hsla(0, 0%, 100%, 40%);
-  --surface-hover: hsla(0, 0%, 91%, 40%);
-  --surface-active: hsla(0, 0%, 78%, 40%);
-}
-@media (prefers-color-scheme: dark) {
-  #home-page {
-    --background-transparent: hsla(0, 0%, 5%, 30%);
-    --surface: hsla(0, 0%, 5%, 30%);
-    --surface-hover: hsla(0, 0%, 20%, 30%);
-    --surface-active: hsla(0, 0%, 44%, 30%);
-  }
-}
 #background {
   position: fixed;
   top: 0px;
@@ -101,6 +87,22 @@ main {
     --accent-text-luma: var(--accent-text-luma-dark);
   }
 }
+#home-page,
+[color]:not([color=standard]).subtle-background {
+  --background-transparent: hsla(0, 0%, 0%, 5%);
+  --surface: hsla(0, 0%, 0%, 5%);
+  --surface-hover: hsla(0, 0%, 5%, 10%);
+  --surface-active: hsla(0, 0%, 5%, 15%);
+}
+@media (prefers-color-scheme: dark) {
+  #home-page,
+  [color]:not([color=standard]).subtle-background {
+    --background-transparent: hsla(0, 0%, 100%, 5%);
+    --surface: hsla(0, 0%, 100%, 5%);
+    --surface-hover: hsla(0, 0%, 100%, 10%);
+    --surface-active: hsla(0, 0%, 100%, 15%);
+  }
+}
 [color]:not([color=standard]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
@@ -134,6 +136,21 @@ main {
   color: var(--primary);
   background-color: var(--surface);
 }
+[color]:not([color=standard]).subtle-background {
+  --gradient-luma-1: 97%;
+  --gradient-luma-2: 92%;
+  background-image:
+    linear-gradient(
+      120deg,
+      hsl(var(--hue), 100%, var(--gradient-luma-1)),
+      hsl(var(--hue), 100%, var(--gradient-luma-2)));
+}
+@media (prefers-color-scheme: dark) {
+  [color]:not([color=standard]).subtle-background {
+    --gradient-luma-1: 2%;
+    --gradient-luma-2: 6%;
+  }
+}
 [color=coral] {
   --hue: 20;
   --accent-luma: 50%;

dist/index.js

@@ -1059,7 +1059,7 @@
           return mainContent.value = MessagePage(chatViewModel);
       }
     });
-    return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color, class: "subtle-background" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",

src/View/chatPage.tsx

@@ -22,7 +22,7 @@ export function ChatPage(chatViewModel: ChatViewModel) {
   });
 
   return (
-    <article id="chat-page" set:color={chatViewModel.color}>
+    <article id="chat-page" set:color={chatViewModel.color} class="subtle-background">
       <div>
         <div id="ribbon">
           <button

src/base.css

@@ -1,19 +1,3 @@
-#home-page {
-  --background-transparent: hsla(0, 0%, 100%, 40%);
-  --surface: hsla(0, 0%, 100%, 40%);
-  --surface-hover: hsla(0, 0%, 91%, 40%);
-  --surface-active: hsla(0, 0%, 78%, 40%);
-}
-
-@media (prefers-color-scheme: dark) {
-  #home-page {
-    --background-transparent: hsla(0, 0%, 5%, 30%);
-    --surface: hsla(0, 0%, 5%, 30%);
-    --surface-hover: hsla(0, 0%, 20%, 30%);
-    --surface-active: hsla(0, 0%, 44%, 30%);
-  }
-}
-
 #background {
   position: fixed;
 

src/colors.css

@@ -12,6 +12,24 @@
   }
 }
 
+#home-page,
+[color]:not([color="standard"]).subtle-background {
+  --background-transparent: hsla(0, 0%, 0%, 5%);
+  --surface: hsla(0, 0%, 0%, 5%);
+  --surface-hover: hsla(0, 0%, 5%, 10%);
+  --surface-active: hsla(0, 0%, 5%, 15%);
+}
+
+@media (prefers-color-scheme: dark) {
+  #home-page,
+  [color]:not([color="standard"]).subtle-background {
+    --background-transparent: hsla(0, 0%, 100%, 5%);
+    --surface: hsla(0, 0%, 100%, 5%);
+    --surface-hover: hsla(0, 0%, 100%, 10%);
+    --surface-active: hsla(0, 0%, 100%, 15%);
+  }
+}
+
 /* tile */
 [color]:not([color="standard"]).tile {
   --gradient-luma-1: 70%;
@@ -56,6 +74,25 @@
   background-color: var(--surface);
 }
 
+/* subtle */
+[color]:not([color="standard"]).subtle-background {
+  --gradient-luma-1: 97%;
+  --gradient-luma-2: 92%;
+
+  background-image: linear-gradient(
+    120deg,
+    hsl(var(--hue), 100%, var(--gradient-luma-1)),
+    hsl(var(--hue), 100%, var(--gradient-luma-2))
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  [color]:not([color="standard"]).subtle-background {
+    --gradient-luma-1: 2%;
+    --gradient-luma-2: 6%;
+  }
+}
+
 /* definitions */
 [color="coral"] {
   --hue: 20;