diff --git a/src/main.rs b/src/main.rs
index 1146a49..c177a3f 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -15,6 +15,7 @@ slint::slint! {
         in-out property <float> minute: 0.0;
         in-out property <float> second: 0.0;
         in-out property <bool> is_on_top: true;
+        in-out property <bool> is_dark_mode: false;
         in-out property <float> dial_opacity: 0.92;
         in-out property <length> clock_size: 300px;
 
@@ -29,7 +30,7 @@ slint::slint! {
             x: touch_area.mouse-x;
             y: touch_area.mouse-y;
             width: 160px;
-            height: 200px;
+            height: 240px;
 
             Rectangle {
                 background: #1e1e1e;
@@ -52,6 +53,14 @@ slint::slint! {
                         t1 := TouchArea { clicked => { root.toggle_always_on_top(); menu_popup.close(); } }
                     }
 
+                    Rectangle {
+                        height: 30px;
+                        background: t_theme.has-hover ? #333 : transparent;
+                        border-radius: 4px;
+                        Text { text: root.is_dark_mode ? "亮色模式" : "幽蓝模式"; color: #ddd; font-size: 14px; }
+                        t_theme := TouchArea { clicked => { root.is_dark_mode = !root.is_dark_mode; menu_popup.close(); } }
+                    }
+
                     Rectangle {
                         height: 30px;
                         background: t2.has-hover ? #333 : transparent;
@@ -102,7 +111,9 @@ slint::slint! {
                 // 背景渐变层
                 Rectangle {
                     width: 100%; height: 100%;
-                    background: @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
+                    background: root.is_dark_mode ? 
+                        @radial-gradient(circle, #3a5dbd 0%, #1a2a6c 70%, #000055 100%) : 
+                        @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
                     opacity: root.dial_opacity;
                     border-radius: self.width / 2;
                 }
@@ -112,13 +123,13 @@ slint::slint! {
                     width: 100%; height: 100%;
                     border-radius: self.width / 2;
                     border-width: 2.5px;
-                    border-color: rgba(255, 255, 255, 0.4);
+                    border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.3) : rgba(255, 255, 255, 0.4);
 
                     Rectangle {
                         width: 97%; height: 97%;
                         border-radius: self.width / 2;
                         border-width: 1.2px;
-                        border-color: rgba(255, 255, 255, 0.2);
+                        border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.15) : rgba(255, 255, 255, 0.2);
                     }
                 }
 
@@ -126,13 +137,15 @@ slint::slint! {
                 Rectangle {
                     width: 100%; height: 100%;
                     border-radius: self.width / 2;
-                    background: @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
+                    background: root.is_dark_mode ?
+                        @radial-gradient(circle, rgba(100, 150, 255, 0.1) 0%, transparent 80%) :
+                        @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
                 }
 
                 for i in 12 : Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: rgba(0, 0, 0, 0.5);
+                    stroke: root.is_dark_mode ? rgba(200, 220, 255, 0.5) : rgba(0, 0, 0, 0.5);
                     stroke-width: 2px;
                     property <float> angle: i * 30;
                     MoveTo { 
@@ -155,7 +168,7 @@ slint::slint! {
                     x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
                     y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
                     text: entry.t;
-                    color: rgba(0, 0, 0, 0.7);
+                    color: root.is_dark_mode ? rgba(255, 255, 255, 0.8) : rgba(0, 0, 0, 0.7);
                     font-size: 16px;
                     font-weight: 500;
                 }
@@ -163,7 +176,7 @@ slint::slint! {
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #1a1a1a;
+                    stroke: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
                     stroke-width: 5px;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
@@ -175,7 +188,7 @@ slint::slint! {
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #333333;
+                    stroke: root.is_dark_mode ? #bdbdbd : #333333;
                     stroke-width: 3.5px;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
@@ -200,10 +213,10 @@ slint::slint! {
                     x: (parent.width - self.width) / 2;
                     y: (parent.height - self.height) / 2;
                     width: 8px; height: 8px;
-                    background: #1a1a1a;
+                    background: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
                     border-radius: 4px;
                     border-width: 1.5px;
-                    border-color: #ffcc33;
+                    border-color: root.is_dark_mode ? #1a2a6c : #ffcc33;
                 }
             }
         }