fix: 独立窗口及任务栏图标适配深色模式

4 个独立窗口(AboutWindow/SettingsWindow/TextColorPicker/TrafficChartWindow)
新增 isDarkMode 属性,由 networkview.qml 检测后注入,各窗口定义深/浅双色方案。

深色模式检测从 DockPalette.iconTextPalette 改为 DTK.palette.window.hslLightness,
因 DockPalette 不随系统深色主题变化。

同时将 networkview.qml 任务栏图标和 NetworkPopup 弹窗的颜色基从
DockPalette.iconTextPalette 改为 DTK.palette.windowText,修复深色模式
下黑底黑字、浅色模式下白底白字的问题。
This commit is contained in:
2026-07-24 09:30:18 +08:00
parent 42028d93bd
commit c614df5fbe
7 changed files with 219 additions and 116 deletions
+36 -22
View File
@@ -3,9 +3,11 @@
// SPDX-License-Identifier: LGPL-3.0-or-later
// 关于窗口:DTK 原生风格的独立顶层窗口,桌面居中弹出,展示插件信息
// 设计要点:白色圆角卡片 + 键值对信息布局,信息标签使用 deepin 蓝(#0081FF),
// 关闭按钮 hover 高亮色由父组件通过 accentColor 传入(红色)
// 对外依赖:accentColor,由 networkview.qml 实例化时传入,触发方式为 show()/raise()/requestActivate()
// 设计要点:圆角卡片 + 键值对信息布局,信息标签使用 deepin 蓝(#0081FF),
// 关闭按钮 hover 高亮色由父组件通过 accentColor 传入(红色)
// 深/浅主题由 isDarkMode 切换(networkview.qml 依据 DockPalette 检测任务栏深浅后传入),
// 默认浅色,保证组件独立预览时与原版视觉一致
// 对外依赖:accentColor、isDarkMode,由 networkview.qml 实例化时传入,触发方式为 show()/raise()/requestActivate()
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
@@ -21,6 +23,18 @@ Window {
// 默认值保证组件独立可用(如 qmlscene 预览时未传入)
property string version: "1.0"
// 深色模式标记:由 networkview.qml 根据 DockPalette 检测后传入;
// 默认 false(浅色)保证组件独立预览时与原版视觉一致
property bool isDarkMode: false
// ---- 主题感知颜色:isDarkMode 为 false 时取值与原浅色硬编码完全一致 ----
readonly property color winBg: isDarkMode ? "#202020" : "#FFFFFF"
readonly property color cardBg: isDarkMode ? "#2A2A2A" : "#FFFFFF"
readonly property color lineColor: isDarkMode ? "#383838" : "#E8E8E8"
readonly property color textPrimary: isDarkMode ? "#E0E0E0" : "#333333"
readonly property color textSecondary: isDarkMode ? "#AAAAAA" : "#666666"
readonly property color textTertiary: isDarkMode ? "#888888" : "#999999"
// 复制成功状态标记:true 时复制图标变绿并显示"已复制"提示,
// 2 秒后由 copyResetTimer 复位
property bool copied: false
@@ -39,13 +53,13 @@ Window {
}
}
// 窗口主体:白色圆角卡片,1px 浅灰边框模拟 DTK 窗口描边
// 窗口主体:圆角卡片(背景与边框随 isDarkMode 切换深浅)1px 边框模拟 DTK 窗口描边
Rectangle {
anchors.fill: parent
color: "#FFFFFF"
color: root.winBg
radius: 12
border.width: 1
border.color: "#E8E8E8"
border.color: root.lineColor
ColumnLayout {
anchors.fill: parent
@@ -70,7 +84,7 @@ Window {
text: qsTr("关于")
font.pixelSize: 15
font.weight: Font.Bold
color: "#333333"
color: root.textPrimary
}
// 关闭按钮:28x28 圆形,hover 时淡红底 + 红色 ×(颜色由 accentColor 决定)
@@ -88,7 +102,7 @@ Window {
text: "×"
font.pixelSize: 20
font.weight: Font.Bold
color: aboutCloseMouse.containsMouse ? accentColor : "#666666"
color: aboutCloseMouse.containsMouse ? accentColor : root.textSecondary
}
MouseArea {
@@ -117,7 +131,7 @@ Window {
text: qsTr("网络速度监控")
font.pixelSize: 18
font.weight: Font.Bold
color: "#333333"
color: root.textPrimary
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
}
@@ -125,7 +139,7 @@ Window {
Text {
text: "JNetApplet"
font.pixelSize: 12
color: "#999999"
color: root.textTertiary
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
}
@@ -142,7 +156,7 @@ Window {
Layout.leftMargin: 24
Layout.rightMargin: 24
Layout.preferredHeight: 1
color: "#E8E8E8"
color: root.lineColor
}
// 信息区上方间距
@@ -173,7 +187,7 @@ Window {
Text {
text: version
font.pixelSize: 12
color: "#333333"
color: root.textPrimary
Layout.fillWidth: true
}
}
@@ -194,7 +208,7 @@ Window {
Text {
text: "Jokul"
font.pixelSize: 12
color: "#333333"
color: root.textPrimary
Layout.fillWidth: true
}
}
@@ -215,7 +229,7 @@ Window {
Text {
text: qsTr("监控网络速度和流量")
font.pixelSize: 12
color: "#333333"
color: root.textPrimary
Layout.fillWidth: true
wrapMode: Text.WordWrap
}
@@ -237,7 +251,7 @@ Window {
Text {
text: "git.jokul.space/Jokul/JNetApplet"
font.pixelSize: 11
color: "#999999"
color: root.textTertiary
Layout.fillWidth: true
wrapMode: Text.WrapAnywhere
}
@@ -248,7 +262,7 @@ Window {
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignTop
// "已复制"提示:白底绿字小标签,显示在按钮左侧,
// "已复制"提示:卡片底色绿字小标签,显示在按钮左侧,
// 覆盖于 URL 文字上方,避免与值文本混排
Rectangle {
anchors.right: parent.left
@@ -258,7 +272,7 @@ Window {
width: copiedHintText.implicitWidth + 10
height: 18
radius: 4
color: "#FFFFFF"
color: root.cardBg
border.width: 1
border.color: "#22A34A"
@@ -286,7 +300,7 @@ Window {
}
// 复制图标:两个重叠的小圆角矩形
// 前层矩形白底压住后层边框重叠区,形成"堆叠纸张"的视觉效果
// 前层矩形以卡片底色压住后层边框重叠区,形成"堆叠纸张"的视觉效果
// 后层矩形(向右下偏移 2px
Rectangle {
x: 8
@@ -294,9 +308,9 @@ Window {
width: 10
height: 10
radius: 2
color: "#FFFFFF"
color: root.cardBg
border.width: 1
border.color: copyRepoMouse.containsMouse ? "#333333" : "#999999"
border.color: copyRepoMouse.containsMouse ? root.textPrimary : root.textTertiary
}
// 前层矩形(左上),复制成功时边框短暂变绿
@@ -306,9 +320,9 @@ Window {
width: 10
height: 10
radius: 2
color: "#FFFFFF"
color: root.cardBg
border.width: 1
border.color: copied ? "#22A34A" : (copyRepoMouse.containsMouse ? "#333333" : "#999999")
border.color: copied ? "#22A34A" : (copyRepoMouse.containsMouse ? root.textPrimary : root.textTertiary)
}
}
}