bugfix(#133): update ui in extension...

Extension/src/pages/Panel/Message/index.css

@@ -1,3 +1,13 @@
+[data-theme='light'] {
+    --send-theme-color: #0a164d;
+    --receive-theme-color: #0d0c0d;
+  }
+  
+  [data-theme='dark'] {
+    --send-theme-color: #0a164d;
+    --receive-theme-color: #333333;
+  }
+
 .message {
     display: flex;
     flex-direction: column;
@@ -7,20 +17,16 @@
 .message_sent {
     width: fit-content;
     padding: 5px;
-    border: #04c4f8 1px solid;
-    border-radius: 3px;
-    background-color: transparent;
-    color: #04c4f8;
+    border-radius: 5px;
+    background-color: var(--send-theme-color);
     align-self: end;
 }
 
 .message_received {
     width: fit-content;
     padding: 5px;
-    border: #bc0fdb 1px solid;
-    border-radius: 3px;
-    background-color: transparent;
-    color: #bc0fdb;
+    border-radius: 5px;
+    background-color: var(--receive-theme-color);
 }
 
 

Extension/src/pages/Panel/Panel.css

@@ -1,10 +1,21 @@
+[data-theme='light'] {
+  --font-color: #c9d1d9;
+  --theme-color: #333333;
+}
+
+[data-theme='dark'] {
+  --font-color: #aeafb2;
+  --theme-color: #0d0c0d;
+}
+
 .main-layout {
   display: flex;
   flex-direction: column;
   height: 350px; /* Set the height of the layout to be 100% of the viewport */
   width: 400px;
-  border-radius: 5px;
-  background-color: #f5f5f5dd;
+  border-radius: 10px;  
+  background-color: var(--theme-color);
+  color: var(--font-color);
 }
 
 .main-layout .ant-layout-content {
@@ -19,6 +30,7 @@
 .footer {
   padding: 10px;
   justify-self: end;
+  background-color: var(--theme-color);
 }
 
 .content {
@@ -44,4 +56,5 @@
 
 .divider {
   margin: 0;
+  background-color: grey;
 }

Extension/src/pages/Panel/Panel.jsx

@@ -231,8 +231,20 @@ const Panel = () => {
         return data
     }
 
+    /// Check if the user's system is in dark mode
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const isDarkMode = darkModeMediaQuery.matches;
+
+    const handleThemeChange = (e) => {
+        const isDarkMode = e.matches;
+        // Do something based on the new theme data
+    };
+
+    // Listen for changes in the theme data
+    darkModeMediaQuery.addEventListener('change', handleThemeChange);
+
     return (
-        <Layout className="main-layout">
+        <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
             <div className="header">
                 <h4>RisingBrowser</h4>
             </div>