improve ui

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;