SystemMonitor: add custom color settings for system monitor threshold settings

Assets/settings-default.json

@@ -115,7 +115,10 @@
     "memWarningThreshold": 80,
     "memCriticalThreshold": 90,
     "diskWarningThreshold": 80,
-    "diskCriticalThreshold": 90
+    "diskCriticalThreshold": 90,
+    "useCustomColors": false,
+    "warningColor": "",
+    "criticalColor": ""
   },
   "wallpaper": {
     "enabled": true,

Commons/Settings.qml

@@ -331,6 +331,9 @@ Singleton {
       property int memCriticalThreshold: 90
       property int diskWarningThreshold: 80
       property int diskCriticalThreshold: 90
+      property bool useCustomColors: false
+      property string warningColor: ""
+      property string criticalColor: ""
     }
 
     // dock

Modules/Bar/Widgets/SystemMonitor.qml

@@ -52,8 +52,8 @@ Rectangle {
   readonly property real pillHeight: Style.capsuleHeight * pillBaseRatio
 
   // Highlight colors
-  readonly property color warningColor: Color.mTertiary
-  readonly property color criticalColor: Color.mError
+  readonly property color warningColor: Settings.data.systemMonitor.useCustomColors ? (Settings.data.systemMonitor.warningColor || Color.mTertiary) : Color.mTertiary
+  readonly property color criticalColor: Settings.data.systemMonitor.useCustomColors ? (Settings.data.systemMonitor.criticalColor || Color.mError) : Color.mError
 
   readonly property int percentTextWidth: Math.ceil(percentMetrics.boundingRect.width + 3)
   readonly property int tempTextWidth: Math.ceil(tempMetrics.boundingRect.width + 3)
@@ -119,13 +119,15 @@ Rectangle {
       property bool warning: false
       property bool critical: false
       property int indicatorWidth: Style.capsuleHeight
+      property color warningColor: Color.mTertiary
+      property color criticalColor: Color.mError
       
       width: isVertical ? Math.max(0, indicatorWidth - Style.marginS * 2) : Math.max(0, indicatorWidth + Style.marginXS * 2)
       height: isVertical ? Math.max(0, Style.capsuleHeight + Style.marginXS * 2) : pillHeight
       radius: Math.min(width, height) / 2
       // Hide the rectangular indicator when the bar is vertical; keep it available for horizontal layout
       visible: !root.isVertical
-      color: critical ? Color.mError : Color.mTertiary
+      color: critical ? criticalColor : warningColor
       scale: (warning || critical) ? 1.0 : 0.0
       opacity: (warning || critical) ? 1.0 : 0.0
 
@@ -170,6 +172,8 @@ Rectangle {
           item.warning = Qt.binding(() => cpuWarning)
           item.critical = Qt.binding(() => cpuCritical)
           item.indicatorWidth = Qt.binding(() => cpuUsageContainer.width)
+          item.warningColor = Qt.binding(() => root.warningColor)
+          item.criticalColor = Qt.binding(() => root.criticalColor)
         }
       }
 
@@ -242,6 +246,8 @@ Rectangle {
           item.warning = Qt.binding(() => tempWarning)
           item.critical = Qt.binding(() => tempCritical)
           item.indicatorWidth = Qt.binding(() => cpuTempContainer.width)
+          item.warningColor = Qt.binding(() => root.warningColor)
+          item.criticalColor = Qt.binding(() => root.criticalColor)
         }
       }
 
@@ -307,6 +313,8 @@ Rectangle {
           item.warning = Qt.binding(() => memWarning)
           item.critical = Qt.binding(() => memCritical)
           item.indicatorWidth = Qt.binding(() => memoryContainer.width)
+          item.warningColor = Qt.binding(() => root.warningColor)
+          item.criticalColor = Qt.binding(() => root.criticalColor)
         }
       }
 
@@ -460,6 +468,8 @@ Rectangle {
           item.warning = Qt.binding(() => diskWarning)
           item.critical = Qt.binding(() => diskCritical)
           item.indicatorWidth = Qt.binding(() => diskContainer.width)
+          item.warningColor = Qt.binding(() => root.warningColor)
+          item.criticalColor = Qt.binding(() => root.criticalColor)
         }
       }
 

Modules/Panels/Settings/Tabs/SystemMonitorTab.qml

@@ -17,7 +17,88 @@ ColumnLayout {
     description: I18n.tr("settings.system-monitor.general.section.description")
   }
 
-  // CPU Usage Thresholds
+  // Colors Section
+  RowLayout {
+    Layout.fillWidth: true
+    spacing: Style.marginM
+
+      NToggle {
+      label: I18n.tr("settings.system-monitor.use-custom-highlight-colors.label")
+      description: I18n.tr("settings.system-monitor.use-custom-highlight-colors.description")
+      checked: Settings.data.systemMonitor.useCustomColors
+      onToggled: {
+        // If enabling custom colors and no custom color is saved, persist current theme colors
+        if (checked) {
+          if (!Settings.data.systemMonitor.warningColor || Settings.data.systemMonitor.warningColor === "") {
+            Settings.data.systemMonitor.warningColor = Color.mTertiary.toString()
+          }
+          if (!Settings.data.systemMonitor.criticalColor || Settings.data.systemMonitor.criticalColor === "") {
+            Settings.data.systemMonitor.criticalColor = Color.mError.toString()
+          }
+        }
+        Settings.data.systemMonitor.useCustomColors = checked
+      }
+    }
+  }
+
+  RowLayout {
+    Layout.fillWidth: true
+    spacing: Style.marginM
+    visible: Settings.data.systemMonitor.useCustomColors
+    
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: Style.marginM
+
+      NText {
+        text: I18n.tr("settings.system-monitor.warning-color.label")
+        pointSize: Style.fontSizeS
+      }
+
+      NColorPicker {
+        Layout.preferredWidth: Style.sliderWidth
+        Layout.preferredHeight: Style.baseWidgetSize
+        enabled: Settings.data.systemMonitor.useCustomColors
+        selectedColor: Settings.data.systemMonitor.warningColor || Color.mTertiary
+        onColorSelected: function(color) {
+          Settings.data.systemMonitor.warningColor = color
+        }
+      }
+    }
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: Style.marginM
+
+      NText {
+        text: I18n.tr("settings.system-monitor.critical-color.label")
+        pointSize: Style.fontSizeS
+      }
+
+      NColorPicker {
+        Layout.preferredWidth: Style.sliderWidth
+        Layout.preferredHeight: Style.baseWidgetSize
+        enabled: Settings.data.systemMonitor.useCustomColors
+        selectedColor: Settings.data.systemMonitor.criticalColor || Color.mError
+        onColorSelected: function(color) {
+          Settings.data.systemMonitor.criticalColor = color
+        }
+      }
+    }
+  }
+
+  NDivider {
+    Layout.fillWidth: true
+  }
+
+  NHeader {
+    Layout.fillWidth: true
+    label: I18n.tr("settings.system-monitor.thresholds-section.label")
+    description: I18n.tr("settings.system-monitor.thresholds-section.description")
+  }
+
+  // CPU Usage
   NText {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginM
@@ -74,7 +155,7 @@ ColumnLayout {
     }
   }
 
-  // Temperature Thresholds
+  // Temperature
   NText {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginM
@@ -130,7 +211,7 @@ ColumnLayout {
     }
   }
 
-  // Memory Usage Thresholds
+  // Memory Usage
   NText {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginM
@@ -186,7 +267,7 @@ ColumnLayout {
     }
   }
 
-  // Disk Usage Thresholds
+  // Disk Usage
   NText {
     Layout.fillWidth: true
     Layout.topMargin: Style.marginM