diff --git a/service.js b/service.js
index 8256d88..93f68e0 100644
--- a/service.js
+++ b/service.js
@@ -1787,7 +1787,7 @@ class BesPopup extends HTMLElement {
         .popup-text {
           font-size: 0.93rem;
           max-width: 160px;
-          color: black;
+          color: #333;
           text-align: center;
           padding: 8px 0;
           z-index: 1;
@@ -1800,9 +1800,9 @@ class BesPopup extends HTMLElement {
           padding: 8px;
           z-index: 1;
           font-family: Arial, sans-serif;
-          background-color: rgb(241, 243, 249);
+          background-color: #f1f3f9;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-          border-radius: 5px;
+          border-radius: 10px;
         }
         .bes-toolbar {
           display: flex;
@@ -1813,11 +1813,12 @@ class BesPopup extends HTMLElement {
           margin-right: 2px;
         }
         .bes-popup-title {
+          color: #333;
           flex-grow: 1;
           cursor: grab;
         }
         .bes-text-div{
-          background-color: white;
+          background-color: #eee;
           padding: 10px;
           border-radius: 5px;
         }
@@ -1827,7 +1828,7 @@ class BesPopup extends HTMLElement {
           border: none;
           border-radius: 5px;
           background-color: #239aff;
-          color: white;
+          color: #eee;
           cursor: pointer;
         }
         .bes-replacement-btn:hover{
@@ -1844,6 +1845,24 @@ class BesPopup extends HTMLElement {
           from {opacity: 0;}
           to {opacity:1 ;}
         }
+        @media (prefers-color-scheme: dark) {
+          .popup-text {
+            font-weight: lighter;
+            color: #eee;
+          }
+          .bes-popup-container {
+            font-weight: lighter;
+            background-color: #57585A;
+          }
+          .bes-popup-title {
+            font-weight: lighter;
+            color: #eee;
+          }
+          .bes-text-div {
+            font-weight: lighter;
+            background-color: #333;
+          }
+        }
       </style>
       <div class="bes-popup-container">
         <div class="bes-toolbar">
@@ -2021,7 +2040,7 @@ customElements.define('bes-popup-el', BesPopup)
 //         }
 //         .popup-text {
 //           max-width: 160px;
-//           color: black;
+//           color: #333;
 //           text-align: center;
 //           padding: 8px 0;
 //           z-index: 1;
@@ -2029,7 +2048,7 @@ customElements.define('bes-popup-el', BesPopup)
 //         .bes-popup-container {
 //           visibility: hidden;
 //           max-width: 300px;
-//           background-color: rgb(241, 243, 249);
+//           background-color: #f1f3f9;
 //           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 //           border-radius: 5px;
 //           padding: 8px;
@@ -2047,7 +2066,7 @@ customElements.define('bes-popup-el', BesPopup)
 //           flex-grow: 1;
 //         }
 //         .bes-text-div{
-//           background-color: white;
+//           background-color: #eee;
 //           padding: 10px;
 //           border-radius: 5px;
 //         }