From 750299726d0f316c47922bcd75a6ff56d73e7b76 Mon Sep 17 00:00:00 2001
From: Jhen <developer@jhen.me>
Date: Wed, 2 Aug 2023 16:29:15 +0800
Subject: [PATCH] server : adjust for dark/light mode

---
 examples/server/public/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/examples/server/public/index.html b/examples/server/public/index.html
index 290a2c42f..09f79019f 100644
--- a/examples/server/public/index.html
+++ b/examples/server/public/index.html
@@ -109,8 +109,7 @@
 
     .popover-content {
       position: absolute;
-      background-color: #777;
-      border: 1px solid #ccc;
+      background-color: white;
       padding: 0.2em;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }
@@ -145,6 +144,12 @@
       font-size: 80%;
       color: #888;
     }
+
+    @media (prefers-color-scheme: dark) {
+      .popover-content {
+        background-color: #777;
+      }
+    }
   </style>
 
   <script type="module">
@@ -419,7 +424,7 @@
     const probColor = (p) => {
       const r = Math.floor(192 * (1 - p));
       const g = Math.floor(192 * p);
-      return `rgba(${r},${g},0,0.75)`;
+      return `rgba(${r},${g},0,0.3)`;
     }
 
     const Probabilites = (params) => {
@@ -456,7 +461,7 @@
         `
 
         return html`
-          <${Popover} style=${{ backgroundColor: pColor}} popoverChildren=${popoverChildren}>${msg.content}</>
+          <${Popover} style=${{ backgroundColor: pColor }} popoverChildren=${popoverChildren}>${msg.content}</>
         `
       });
     }