julian/my-clock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

add dark mode

Browse Source
This commit is contained in:
Julian Freeman
2026-03-01 20:36:54 -04:00
parent 8550420711
commit 05a57dc4c8
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/main.rs
View File

@@ -15,6 +15,7 @@ slint::slint! {
in-out property <float> minute: 0.0; in-out property <float> minute: 0.0;
in-out property <float> second: 0.0; in-out property <float> second: 0.0;
in-out property <bool> is_on_top: true; 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 <float> dial_opacity: 0.92;
in-out property <length> clock_size: 300px; in-out property <length> clock_size: 300px;
@@ -29,7 +30,7 @@ slint::slint! {
x: touch_area.mouse-x; x: touch_area.mouse-x;
y: touch_area.mouse-y; y: touch_area.mouse-y;
width: 160px; width: 160px;
height: 200px; height: 240px;
Rectangle { Rectangle {
background: #1e1e1e; background: #1e1e1e;
@@ -52,6 +53,14 @@ slint::slint! {
t1 := TouchArea { clicked => { root.toggle_always_on_top(); menu_popup.close(); } } 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 { Rectangle {
height: 30px; height: 30px;
background: t2.has-hover ? #333 : transparent; background: t2.has-hover ? #333 : transparent;
@@ -102,7 +111,9 @@ slint::slint! {
// 背景渐变层 // 背景渐变层
Rectangle { Rectangle {
width: 100%; height: 100%; 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; opacity: root.dial_opacity;
border-radius: self.width / 2; border-radius: self.width / 2;
} }
@@ -112,13 +123,13 @@ slint::slint! {
width: 100%; height: 100%; width: 100%; height: 100%;
border-radius: self.width / 2; border-radius: self.width / 2;
border-width: 2.5px; 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 { Rectangle {
width: 97%; height: 97%; width: 97%; height: 97%;
border-radius: self.width / 2; border-radius: self.width / 2;
border-width: 1.2px; 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 { Rectangle {
width: 100%; height: 100%; width: 100%; height: 100%;
border-radius: self.width / 2; 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 { for i in 12 : Path {
viewbox-width: 100; viewbox-height: 100; viewbox-width: 100; viewbox-height: 100;
width: 100%; 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; stroke-width: 2px;
property <float> angle: i * 30; property <float> angle: i * 30;
MoveTo { MoveTo {
@@ -155,7 +168,7 @@ slint::slint! {
x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2; x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2; y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
text: entry.t; 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-size: 16px;
font-weight: 500; font-weight: 500;
} }
@@ -163,7 +176,7 @@ slint::slint! {
Path { Path {
viewbox-width: 100; viewbox-height: 100; viewbox-width: 100; viewbox-height: 100;
width: 100%; height: 100%; width: 100%; height: 100%;
stroke: #1a1a1a; stroke: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
stroke-width: 5px; stroke-width: 5px;
MoveTo { x: 50; y: 50; } MoveTo { x: 50; y: 50; }
LineTo { LineTo {
@@ -175,7 +188,7 @@ slint::slint! {
Path { Path {
viewbox-width: 100; viewbox-height: 100; viewbox-width: 100; viewbox-height: 100;
width: 100%; height: 100%; width: 100%; height: 100%;
stroke: #333333; stroke: root.is_dark_mode ? #bdbdbd : #333333;
stroke-width: 3.5px; stroke-width: 3.5px;
MoveTo { x: 50; y: 50; } MoveTo { x: 50; y: 50; }
LineTo { LineTo {
@@ -200,10 +213,10 @@ slint::slint! {
x: (parent.width - self.width) / 2; x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2; y: (parent.height - self.height) / 2;
width: 8px; height: 8px; width: 8px; height: 8px;
background: #1a1a1a; background: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
border-radius: 4px; border-radius: 4px;
border-width: 1.5px; border-width: 1.5px;
border-color: #ffcc33; border-color: root.is_dark_mode ? #1a2a6c : #ffcc33;
} }
} }
} }