Implemented dark mode

kwindrem · May 16, 2023 · 755b0dc · 755b0dc
1 parent eac6040
commit 755b0dc
Show file tree

Hide file tree

Showing 65 changed files with 30,350 additions and 202 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,8 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Set default behaviour, in case users don't have core.autocrlf set.
+* text=auto eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.gif       binary
+*.jpg       binary
+*.png       binary
+*.zip       binary
diff --git a/FileSets/PowerGauge.qml b/FileSets/PowerGauge.qml
@@ -8,6 +8,8 @@ import com.victron.velib 1.0
 Item {
 	id: root
 
+	property VBusItem darkMode: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+
     property variant connection
 
     property bool reversePower: false
@@ -51,7 +53,7 @@ Item {
     property real bar1offset
     property real bar2offset
     property real bar3offset
-    
+
     property color bar1color: "black"
     property color bar2color: "black"
     property color bar3color: "black"
@@ -79,13 +81,13 @@ Item {
         visible: showLeftLabel
     }
     // right end label
- 	Rectangle
+    Rectangle
 	{
 		anchors.fill: rightLabelText
 		color: endLabelBackgroundColor
         visible: showRightLabel
 	}
-   TileText
+    TileText
     {
 		id: rightLabelText
         text: "C"
@@ -106,7 +108,7 @@ Item {
         width: showGauge ? scaleFactor * (maxReverseDisplayed - maxReverseLimit) : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -121,7 +123,7 @@ Item {
         width: showGauge ? scaleFactor * (maxForwardLimit + maxReverseLimit) : 0
         height: root.height
         clip: true
-        color: "#99ff99"
+        color: darkMode.value == 0 ? "#99ff99" : "#73bf73"
         visible: showGauge
         anchors
         {
@@ -136,7 +138,7 @@ Item {
         width: showGauge ? scaleFactor * (maxForwardDisplayed - maxForwardLimit) : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -281,8 +283,8 @@ Item {
     function getBarColor (currentValue)
     {
         if (currentValue > maxForwardLimit || currentValue < -maxReverseLimit)
-            return "red"
+            return darkMode.value == 0 ? "#ff0000" : "#bf0000"
         else
-            return "green"
+            return darkMode.value == 0 ? "#008000" : "#006000"
     }
 }
diff --git a/FileSets/PowerGaugeBattery.qml b/FileSets/PowerGaugeBattery.qml
@@ -7,12 +7,14 @@ import com.victron.velib 1.0
 Item {
 	id: root
 
+	property VBusItem darkMode: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+
     property variant endLabelFontSize: 16
     property color endLabelBackgroundColor: "transparent"
 
-    property int barHeight: Math.max (height / 2, 2)    
+    property int barHeight: Math.max (height / 2, 2)
     property color barColor: "black"
-    
+
     property real chargeOverload: maxCharge.valid ? maxCharge.value : 0
     property real chargeCaution: chargeOverload
     property real maxChargeDisplayed: chargeOverload * 1.1
@@ -27,7 +29,7 @@ Item {
     property real barWidth
     property real barOffset
     property color endLabelColor: "white"
-    
+
 	Component.onCompleted: calculateBarWidth ()
 
     VBusItem
@@ -74,7 +76,7 @@ Item {
         visible: showGauge
     }
     // charge end label
- 	Rectangle
+    Rectangle
 	{
 		anchors.fill: chargeText
 		color: endLabelBackgroundColor
@@ -101,7 +103,7 @@ Item {
         width: showGauge ? scaleFactor * (maxDischargeDisplayed - dischargeOverload) : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -116,7 +118,7 @@ Item {
         width: showGauge ? scaleFactor * (dischargeOverload - dischargeCaution) : 0
         height: root.height
         clip: true
-        color: "#bbbb00"
+        color: darkMode.value == 0 ? "#bbbb00" : "#8c8c00"
         visible: showGauge
         anchors
         {
@@ -131,7 +133,7 @@ Item {
         width: showGauge ? scaleFactor * (dischargeCaution + chargeCaution) : 0
         height: root.height
         clip: true
-        color: "#99ff99"
+        color: darkMode.value == 0 ? "#99ff99" : "#73bf73"
         visible: showGauge
         anchors
         {
@@ -146,7 +148,7 @@ Item {
         width: showGauge ? scaleFactor * (chargeOverload - chargeCaution) : 0
         height: root.height
         clip: true
-        color: "#bbbb00"
+        color: darkMode.value == 0 ? "#bbbb00" : "#8c8c00"
         visible: showGauge
         anchors
         {
@@ -161,7 +163,7 @@ Item {
         width: showGauge ? scaleFactor * (maxChargeDisplayed - chargeOverload) : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -202,32 +204,32 @@ Item {
             leftMargin: zeroOffset
         }
     }
-    
+
     function calculateBarWidth ()
     {
         var current = batteryCurrent.valid ? batteryCurrent.value : 0
-    
+
         current = Math.min ( Math.max (current, -maxDischargeDisplayed), maxChargeDisplayed)
-    
+
         if (current >= 0)
         {
             if (current > chargeOverload)
-                barColor = "red"
+                barColor = darkMode.value == 0 ? "#ff0000" : "#bf0000"
             else if (current > chargeCaution)
-                barColor = "yellow"
+                barColor = darkMode.value == 0 ? "#ffff00" : "#bfbf00"
             else
-                barColor = "green"
+                barColor = darkMode.value == 0 ? "#008000" : "#006000"
             root.barOffset = zeroOffset
             root.barWidth = current * scaleFactor
         }
         else
-         {
+        {
             if (current < -dischargeOverload)
-                barColor = "red"
+                barColor = darkMode.value == 0 ? "#ff0000" : "#bf0000"
             else if (current < -dischargeCaution)
-                barColor = "yellow"
+                barColor = darkMode.value == 0 ? "#ffff00" : "#bfbf00"
             else
-                barColor = "green"
+                barColor = darkMode.value == 0 ? "#008000" : "#006000"
             root.barWidth = -current * scaleFactor
             root.barOffset = zeroOffset - root.barWidth
         }

diff --git a/FileSets/PowerGaugeMulti.qml b/FileSets/PowerGaugeMulti.qml
@@ -8,6 +8,8 @@ import com.victron.velib 1.0
 Item {
 	id: root
 
+	property VBusItem darkMode: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+
     property string inverterService: ""
     property VBusItem inverterModeItem: VBusItem { bind: Utils.path(inverterService, "/Mode" ) }
     VBusItem
@@ -17,37 +19,37 @@ Item {
     }
 
     VBusItem
-    { 
+    {
         id: pInL1; bind: Utils.path(inverterService, "/Ac/ActiveIn/L1/P")
         onValidChanged: calculateBar1 ()
         onValueChanged: calculateBar1 ()
     }
     VBusItem
-    { 
+    {
         id: pInL2; bind: Utils.path(inverterService, "/Ac/ActiveIn/L2/P")
         onValidChanged: calculateBar2 ()
         onValueChanged: calculateBar2 ()
     }
     VBusItem
-    { 
+    {
         id: pInL3; bind: Utils.path(inverterService, "/Ac/ActiveIn/L3/P")
         onValidChanged: calculateBar3 ()
         onValueChanged: calculateBar3 ()
     }
     VBusItem
-    { 
+    {
         id: pOutL1; bind: Utils.path(inverterService, "/Ac/Out/L1/P")
         onValidChanged: calculateBar1 ()
         onValueChanged: calculateBar1 ()
     }
     VBusItem
-    { 
+    {
         id: pOutL2; bind: Utils.path(inverterService, "/Ac/Out/L2/P")
         onValidChanged: calculateBar2 ()
         onValueChanged: calculateBar2 ()
     }
     VBusItem
-    { 
+    {
         id: pOutL3; bind: Utils.path(inverterService, "/Ac/Out/L3/P")
         onValidChanged: calculateBar3 ()
         onValueChanged: calculateBar3 ()
@@ -133,7 +135,7 @@ Item {
         width: visible ? (maxChargerDisplayed - chargerMaxPower) * scaleFactor : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -148,7 +150,7 @@ Item {
         width: visible ? (inverterCaution + chargerMaxPower) * scaleFactor : 0
         height: root.height
         clip: true
-        color: "#99ff99"
+        color: darkMode.value == 0 ? "#99ff99" : "#73bf73"
         visible: showGauge
         anchors
         {
@@ -163,7 +165,7 @@ Item {
         width: visible ? (inverterOverload - inverterCaution) * scaleFactor : 0
         height: root.height
         clip: true
-        color: "#bbbb00"
+        color: darkMode.value == 0 ? "#bbbb00" : "#8c8c00"
         visible: showGauge
         anchors
         {
@@ -178,7 +180,7 @@ Item {
         width: visible ? (maxInverterDisplayed - inverterOverload) * scaleFactor : 0
         height: root.height
         clip: true
-        color: "#ffb3b3"
+        color: darkMode.value == 0 ? "#ffb3b3" : "#bf8686"
         visible: showGauge
         anchors
         {
@@ -331,11 +333,11 @@ Item {
     function getBarColor (power)
     {
         if (power > inverterOverload || power < -chargerMaxPower)
-            return "red"
+            return darkMode.value == 0 ? "#ff0000" : "#bf0000"
         else if (power > inverterCaution)
-            return "yellow"
+            return darkMode.value == 0 ? "#ffff00" : "#bfbf00"
         else
-            return "green"
+            return darkMode.value == 0 ? "#008000" : "#006000"
     }
 
 	function calculateAllBars ()

diff --git a/FileSets/TileTemp.qml b/FileSets/TileTemp.qml
@@ -9,6 +9,8 @@ import "tanksensor.js" as TankSensor
 Tile {
 	id: root
 
+	property VBusItem darkMode: VBusItem { bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode" }
+
 	property string bindPrefix: serviceName
 	property string alarmBase: Utils.path ("com.victronenergy.temprelay/Sensor/", serviceName.split(".")[3])
 	property VBusItem alarmEnabledItem: VBusItem { bind: Utils.path ( alarmBase, "/Enabled" ) }
@@ -52,8 +54,8 @@ Tile {
 
     property variant tempNames: [qsTr("Battery"), qsTr("Fridge"), qsTr("Generic")]
     property string tempName: customNameItem.valid && customNameItem.value !== "" ? customNameItem.value : temperatureTypeItem.valid ? tempNames [temperatureTypeItem.value] : isBatteryTemperature ? "Battery" : "TEMP"
-    property variant tempColors: ["#4aa3df", "#1abc9c", "#F39C12"]
-    property color tempColor: temperatureTypeItem.valid ? tempColors [temperatureTypeItem.value] : isBatteryTemperature ? "#4aa3df" :"#7f8c8d"
+    property variant tempColors: darkMode.value == 0 ? ["#4aa3df", "#1abc9c", "#F39C12"] : ["#25516f", "#0d5e4e", "#794e09"]
+    property color tempColor: temperatureTypeItem.valid ? tempColors [temperatureTypeItem.value] : isBatteryTemperature ? (darkMode.value == 0 ? "#4aa3df" : "#25516f") : (darkMode.value == 0 ? "#7f8c8d" : "#3f4646")
 
 	// compact puts name on same line as temp/humidity
 	//	otherwise name is in title and value on separate line
@@ -92,7 +94,7 @@ Tile {
 			id: valueTextFixed
 			height: nameTextFixed.height
             text:
-            {   
+            {
                 if (root.temperature == -99)
                     return "--"
                 else if (tempScale == 2)

diff --git a/FileSets/fileList b/FileSets/fileList
@@ -21,3 +21,20 @@
 /opt/victronenergy/gui/qml/PageGenerator.qml
 /opt/victronenergy/gui/qml/PageSettingsGenerator.qml
 /opt/victronenergy/gui/qml/TileDigIn.qml
+/opt/victronenergy/gui/qml/Battery.qml
+/opt/victronenergy/gui/qml/MbEditBox.qml
+/opt/victronenergy/gui/qml/MbEditBoxDateTime.qml
+/opt/victronenergy/gui/qml/MbItem.qml
+/opt/victronenergy/gui/qml/MbSpinBox.qml
+/opt/victronenergy/gui/qml/MbStyle.qml
+/opt/victronenergy/gui/qml/MbSubMenu.qml
+/opt/victronenergy/gui/qml/OverviewBox.qml
+/opt/victronenergy/gui/qml/OverviewConnection.qml
+/opt/victronenergy/gui/qml/OverviewConnectionEnd.qml
+/opt/victronenergy/gui/qml/OverviewGridParallel.qml
+/opt/victronenergy/gui/qml/OverviewHub.qml
+/opt/victronenergy/gui/qml/OverviewSolarCharger.qml
+/opt/victronenergy/gui/qml/OverviewSolarInverter.qml
+/opt/victronenergy/gui/qml/Tile.qml
+/opt/victronenergy/gui/qml/TileText.qml
+/var/www/venus/styling/styles.css
diff --git a/FileSets/v2.66/PageSettingsDisplay.qml b/FileSets/v2.66/PageSettingsDisplay.qml
@@ -53,6 +53,14 @@ MbPage {
 			]
 		}
 
+		MbSwitch
+		{
+			id: enableDarkMode
+			bind: "com.victronenergy.settings/Settings/GuiMods/DarkMode"
+			name: qsTr ("Dark Mode")
+			writeAccessLevel: User.AccessUser
+		}
+
 		MbSwitch {
 			bind: Utils.path(bindPrefix, "/MobileOverview")
 			name: qsTr("Show boat & motorhome overview")