From 28b8127fd106f8212a656bfd4399bb2ed93dde53 Mon Sep 17 00:00:00 2001
From: gitcpy <gitcpy@users.noreply.github.com>
Date: Sun, 22 Sep 2024 17:05:35 +0800
Subject: [PATCH] Adjust the light and dark theme of UI button  in open popup

---
 styles.css | 45 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/styles.css b/styles.css
index 37aba98..1f19cc4 100644
--- a/styles.css
+++ b/styles.css
@@ -47,11 +47,12 @@
     padding: 5px;
     cursor: pointer;
     font-size: 16px;
-    color: rgb(0 0 0 / 52%); /* Correct color */
 }
+
 .control-button:hover {
     background: rgba(255, 255, 255, 0.9);
 }
+
 .arrow-up, .arrow-down, .arrow-left, .arrow-right, .zoom-in, .zoom-out, .close-popup {
     width: 30px;
     height: 30px;
@@ -60,17 +61,45 @@
     align-items: center;
 }
 
+/* 按钮的 hover 样式 */
+.arrow-up:hover, .arrow-down:hover, .arrow-left:hover, .arrow-right:hover, 
+.zoom-in:hover, .zoom-out:hover, .close-popup:hover {
+    background-color: var(--button-bg-hover);
+    color: var(--button-color-hover);
+}
+
+/* 浅色主题 */
+@media (prefers-color-scheme: light) {
+    :root {
+        --button-bg: #e0e0e0; /* 浅色主题的按钮背景色 */
+        --button-color: #000; /* 浅色主题的按钮文字或图标颜色 */
+        --button-bg-hover: #d0d0d0; /* 浅色主题的按钮 hover 背景色 */
+        --button-color-hover: #333; /* 浅色主题的按钮 hover 文字或图标颜色 */
+    }
+}
+
+/* 深色主题 */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --button-bg: #333; /* 深色主题的按钮背景色 */
+        --button-color: #fff; /* 深色主题的按钮文字或图标颜色 */
+        --button-bg-hover: #606060; /* 深色主题的按钮 hover 背景色 */
+        --button-color-hover: #000; /* 深色主题的按钮 hover 文字或图标颜色 */
+    }
+}
+
+
 /* 浅色模式下的弹窗背景 */
 body.theme-light .popup-content {
     background-color: #ffffff; /* 白色背景 */
     color: #000000; /* 黑色文本 */
   }
 
-  /* 深色模式下的弹窗背景 */
-  body.theme-dark .popup-content {
-    background-color: #333333; /* 深灰色背景 */
-    color: #ffffff; /* 白色文本 */
-  }
+/* 深色模式下的弹窗背景 */
+body.theme-dark .popup-content {
+background-color: #333333; /* 深灰色背景 */
+color: #ffffff; /* 白色文本 */
+}
 
 .mermaid {
     display: block;
@@ -83,10 +112,6 @@ body.theme-light .popup-content {
     max-height: 100%;
 }
 
-.control-button {
-    color: var(--text-normal)
-}
-
 .popup-content {
     cursor: pointer; /* 悬停时鼠标变为手掌 */
   }