feat: add light/dark theme with tesla-cockpit-like colors

2025-04-11 12:08:54 -07:00
parent b847a846bf
commit baf5d87085
1 changed files with 23 additions and 5 deletions
@@ -1,13 +1,31 @@
 pragma Singleton

+import QtCore
 import QtQuick

 // based on https://colorhunt.co/palette/181c143c3d37697565ecdfcc
 Item {
-    property color background: "#181C14"
-    property color card: "#232421"
+    id: item
+    property color background: darkTheme ? "#1C1C1E" : "#f2f2f2"
+    property color card: darkTheme ? "#2C2C2E" : "#fafafa"
    property color accent: "#697565"
-    property color muted: "#A0A0A0"
-    property color foreground: "#ECDFCC"
-    property color softBorder: "#282926"
+    property color muted: darkTheme ? "#EBEBF5" : "#3C3C43"
+    property color foreground: darkTheme ? "#FFFFFF" : "#000000"
+    property color softBorder: darkTheme ? "#38383A" : "#C6C6C8"
+    property color primaryText: darkTheme ? "#FFFFFF" : "#000000"
+    property color secondaryText: darkTheme ? "#EBEBF5" : "#3C3C43"
+    property color caption: darkTheme ? "#EBEBF5" : "#3C3C43"
+    property color separator: darkTheme ? "#38383A" : "#C6C6C8"
+
+    property int radius: 5
+
+    property bool darkTheme: false
+
+    Settings {
+        property alias darkTheme: item.darkTheme
+    }
+
+    function toggleTheme() {
+      darkTheme = !darkTheme
+    }
 }