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> 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;
}
}
}