add darkmode

dune-weaver-touch/qml/components/BottomNavTab.qml

@@ -1,38 +1,39 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import "." as Components
 
 Rectangle {
     property string icon: ""
     property string text: ""
     property bool active: false
-    
+
     signal clicked()
-    
+
     color: "transparent"
-    
+
     // Active indicator (blue bottom border)
     Rectangle {
         anchors.bottom: parent.bottom
         width: parent.width
         height: 3
-        color: active ? "#2563eb" : "transparent"
-        
+        color: active ? Components.ThemeManager.navIconActive : "transparent"
+
         Behavior on color {
             ColorAnimation { duration: 200 }
         }
     }
-    
+
     Column {
         anchors.centerIn: parent
         spacing: 4
-        
+
         // Icon (using emoji for cross-platform compatibility)
         Text {
             property string iconValue: parent.parent.icon
             text: {
                 // Debug log the icon value
                 console.log("BottomNavTab icon value:", iconValue)
-                
+
                 // Map icon names to Unicode symbols that work on Raspberry Pi
                 switch(iconValue) {
                     case "search": return "⌕"      // U+2315 - Works better than magnifying glass
@@ -47,33 +48,33 @@ Rectangle {
             }
             font.pixelSize: 20
             font.family: "sans-serif"  // Use system sans-serif font
-            color: parent.parent.active ? "#2563eb" : "#6b7280"
+            color: parent.parent.active ? Components.ThemeManager.navIconActive : Components.ThemeManager.navIconInactive
             anchors.horizontalCenter: parent.horizontalCenter
-            
+
             Behavior on color {
                 ColorAnimation { duration: 200 }
             }
         }
-        
+
         // Label
         Label {
             text: parent.parent.text
             font.pixelSize: 11
             font.weight: Font.Medium
-            color: parent.parent.active ? "#2563eb" : "#6b7280"
+            color: parent.parent.active ? Components.ThemeManager.navTextActive : Components.ThemeManager.navTextInactive
             anchors.horizontalCenter: parent.horizontalCenter
-            
+
             Behavior on color {
                 ColorAnimation { duration: 200 }
             }
         }
     }
-    
+
     // Touch feedback
     Rectangle {
         id: touchFeedback
         anchors.fill: parent
-        color: "#f3f4f6"
+        color: Components.ThemeManager.darkMode ? "#404040" : "#f3f4f6"
         opacity: 0
         radius: 0
         

dune-weaver-touch/qml/components/BottomNavigation.qml

@@ -1,22 +1,23 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import "." as Components
 
 Rectangle {
     id: bottomNav
-    
+
     property int currentIndex: 0
     signal tabClicked(int index)
-    
+
     height: 55
-    color: "#ffffff"
-    
+    color: Components.ThemeManager.navBackground
+
     // Top border to match web UI
     Rectangle {
         anchors.top: parent.top
         width: parent.width
         height: 1
-        color: "#e5e7eb"
+        color: Components.ThemeManager.navBorder
     }
     
     RowLayout {

dune-weaver-touch/qml/components/ConnectionSplash.qml

@@ -1,11 +1,12 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import "." as Components
 
 Rectangle {
     id: root
     anchors.fill: parent
-    color: "#1a1a1a"  // Dark background
+    color: Components.ThemeManager.backgroundColor
     
     property string statusText: "Connecting to backend..."
     property bool showRetryButton: false
@@ -23,10 +24,10 @@ Rectangle {
             width: 120
             height: 120
             radius: 60
-            color: "#2d2d2d"
+            color: Components.ThemeManager.cardColor
             border.color: "#4a90e2"
             border.width: 3
-            
+
             Text {
                 anchors.centerIn: parent
                 text: "DW"
@@ -35,23 +36,23 @@ Rectangle {
                 color: "#4a90e2"
             }
         }
-        
+
         Text {
             Layout.alignment: Qt.AlignHCenter
             text: "Dune Weaver Touch"
             font.pixelSize: 32
             font.bold: true
-            color: "white"
+            color: Components.ThemeManager.textPrimary
         }
-        
+
         // Status Area
         Rectangle {
             Layout.alignment: Qt.AlignHCenter
             Layout.preferredWidth: parent.width
             Layout.preferredHeight: 80
-            color: "#2d2d2d"
+            color: Components.ThemeManager.cardColor
             radius: 10
-            border.color: "#444"
+            border.color: Components.ThemeManager.borderColor
             border.width: 1
             
             RowLayout {
@@ -93,31 +94,31 @@ Rectangle {
                     Layout.fillWidth: true
                     text: root.statusText
                     font.pixelSize: 16
-                    color: "#cccccc"
+                    color: Components.ThemeManager.textSecondary
                     wrapMode: Text.WordWrap
                     verticalAlignment: Text.AlignVCenter
                 }
             }
         }
-        
+
         // Retry Button (only show when connection fails)
         Button {
             Layout.alignment: Qt.AlignHCenter
             visible: root.showRetryButton
             text: "Retry Connection"
             font.pixelSize: 16
-            
+
             background: Rectangle {
                 color: parent.pressed ? "#3a7bc8" : "#4a90e2"
                 radius: 8
                 border.color: "#5a9ff2"
                 border.width: 1
-                
+
                 Behavior on color {
                     ColorAnimation { duration: 150 }
                 }
             }
-            
+
             contentItem: Text {
                 text: parent.text
                 font: parent.font
@@ -125,20 +126,20 @@ Rectangle {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
-            
+
             onClicked: {
                 root.showRetryButton = false
                 root.retryConnection()
             }
         }
-        
+
         // Connection Help Text
         Text {
             Layout.alignment: Qt.AlignHCenter
             Layout.preferredWidth: parent.width
-            text: "Make sure the Dune Weaver backend is running on this device."
+            text: "Waiting for backend connection... Make sure the Dune Weaver backend is running on this device."
             font.pixelSize: 14
-            color: "#888"
+            color: Components.ThemeManager.textTertiary
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
         }

dune-weaver-touch/qml/components/ModernPatternCard.qml

@@ -1,11 +1,12 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Effects
+import "." as Components
 
 Rectangle {
     property string name: ""
     property alias preview: previewImage.source
-    
+
     // Clean up the pattern name for display
     property string cleanName: {
         var cleanedName = name
@@ -16,10 +17,10 @@ Rectangle {
         cleanedName = cleanedName.replace('.thr', '')
         return cleanedName
     }
-    
+
     signal clicked()
-    
-    color: "white"
+
+    color: Components.ThemeManager.surfaceColor
     radius: 12
     
     // Drop shadow effect
@@ -49,7 +50,7 @@ Rectangle {
             width: parent.width
             height: parent.height - nameLabel.height - 12
             radius: 8
-            color: "#f8f8f8"
+            color: Components.ThemeManager.previewBackground
             clip: true
             
             Image {
@@ -69,31 +70,31 @@ Rectangle {
             // Placeholder when no preview
             Rectangle {
                 anchors.fill: parent
-                color: "#f0f0f0"
+                color: Components.ThemeManager.placeholderBackground
                 visible: previewImage.status === Image.Error || previewImage.source == ""
                 radius: 8
-                
+
                 Column {
                     anchors.centerIn: parent
                     spacing: 8
-                    
+
                     Text {
                         text: "◻"
                         font.pixelSize: 32
                         anchors.horizontalCenter: parent.horizontalCenter
-                        color: "#ddd"
+                        color: Components.ThemeManager.placeholderText
                     }
-                    
+
                     Text {
                         text: "No Preview"
                         anchors.horizontalCenter: parent.horizontalCenter
-                        color: "#999"
+                        color: Components.ThemeManager.textTertiary
                         font.pixelSize: 12
                     }
                 }
             }
         }
-        
+
         // Pattern name
         Label {
             id: nameLabel
@@ -103,7 +104,7 @@ Rectangle {
             horizontalAlignment: Label.AlignHCenter
             font.pixelSize: 13
             font.weight: Font.Medium
-            color: "#333"
+            color: Components.ThemeManager.textPrimary
             wrapMode: Text.Wrap
             maximumLineCount: 2
         }

dune-weaver-touch/qml/components/ThemeManager.qml

@@ -0,0 +1,77 @@
+pragma Singleton
+import QtQuick 2.15
+import Qt.labs.settings 1.0
+
+QtObject {
+    id: themeManager
+
+    // Theme state - loaded from settings
+    property bool darkMode: settings.darkMode
+
+    // Background colors
+    property color backgroundColor: darkMode ? "#1a1a1a" : "#f5f5f5"
+    property color surfaceColor: darkMode ? "#2d2d2d" : "#ffffff"
+    property color cardColor: darkMode ? "#3d3d3d" : "#f8f9fa"
+
+    // Text colors
+    property color textPrimary: darkMode ? "#ffffff" : "#333333"
+    property color textSecondary: darkMode ? "#b0b0b0" : "#666666"
+    property color textTertiary: darkMode ? "#808080" : "#999999"
+
+    // Border colors
+    property color borderColor: darkMode ? "#4d4d4d" : "#e5e7eb"
+    property color borderLight: darkMode ? "#3d3d3d" : "#f0f0f0"
+
+    // Accent colors (consistent in both themes)
+    property color accentBlue: "#2563eb"
+    property color accentBlueHover: "#1e40af"
+    property color accentRed: "#dc2626"
+    property color accentRedHover: "#b91c1c"
+    property color accentGray: "#6b7280"
+    property color accentGrayHover: "#525252"
+    property color accentGrayDisabled: "#9ca3af"
+
+    // Control colors
+    property color buttonBackground: darkMode ? "#3d3d3d" : "#f0f0f0"
+    property color buttonBackgroundHover: darkMode ? "#4d4d4d" : "#e0e0e0"
+    property color buttonBorder: darkMode ? "#5d5d5d" : "#cccccc"
+
+    // Selected/Active colors
+    property color selectedBackground: "#2196F3"
+    property color selectedBorder: "#1976D2"
+
+    // Placeholder colors
+    property color placeholderBackground: darkMode ? "#2d2d2d" : "#f0f0f0"
+    property color placeholderText: darkMode ? "#606060" : "#cccccc"
+
+    // Preview background - lighter in dark mode for better pattern visibility
+    property color previewBackground: darkMode ? "#505050" : "#f8f9fa"
+
+    // Shadow colors
+    property color shadowColor: darkMode ? "#000000" : "#00000020"
+
+    // Navigation colors
+    property color navBackground: darkMode ? "#1f1f1f" : "#ffffff"
+    property color navBorder: darkMode ? "#3d3d3d" : "#e5e7eb"
+    property color navIconActive: "#2196F3"
+    property color navIconInactive: darkMode ? "#808080" : "#9ca3af"
+    property color navTextActive: darkMode ? "#ffffff" : "#333333"
+    property color navTextInactive: darkMode ? "#808080" : "#666666"
+
+    // Persistent settings
+    property Settings settings: Settings {
+        category: "Appearance"
+        property bool darkMode: false  // Default to light mode
+    }
+
+    onDarkModeChanged: {
+        // Save preference
+        settings.darkMode = darkMode
+        console.log("🎨 Dark mode:", darkMode ? "enabled" : "disabled")
+    }
+
+    // Helper function to get contrast color
+    function getContrastColor(baseColor) {
+        return darkMode ? Qt.lighter(baseColor, 1.2) : Qt.darker(baseColor, 1.1)
+    }
+}

dune-weaver-touch/qml/components/qmldir

@@ -0,0 +1 @@
+singleton ThemeManager 1.0 ThemeManager.qml

dune-weaver-touch/qml/pages/ExecutionPage.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import Qt.labs.folderlistmodel 2.15
 import "../components"
+import "../components" as Components
 
 Page {
     id: page
@@ -52,49 +53,49 @@ Page {
         }
     }
     
-    
+
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
     }
-    
+
     ColumnLayout {
         anchors.fill: parent
         spacing: 0
-        
+
         // Header (consistent with other pages)
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 50
-            color: "white"
-            
+            color: Components.ThemeManager.surfaceColor
+
             // Bottom border
             Rectangle {
                 anchors.bottom: parent.bottom
                 width: parent.width
                 height: 1
-                color: "#e5e7eb"
+                color: Components.ThemeManager.borderColor
             }
-            
+
             RowLayout {
                 anchors.fill: parent
                 anchors.leftMargin: 15
                 anchors.rightMargin: 10
-                
+
                 ConnectionStatus {
                     backend: page.backend
                     Layout.rightMargin: 8
                 }
-                
+
                 Label {
                     text: "Pattern Execution"
                     font.pixelSize: 18
                     font.bold: true
-                    color: "#333"
+                    color: Components.ThemeManager.textPrimary
                 }
-                
-                Item { 
-                    Layout.fillWidth: true 
+
+                Item {
+                    Layout.fillWidth: true
                 }
             }
         }
@@ -112,7 +113,7 @@ Page {
                 Rectangle {
                     width: parent.width * 0.6
                     height: parent.height
-                    color: "#ffffff"
+                    color: Components.ThemeManager.previewBackground
                     
                     Image {
                         anchors.fill: parent
@@ -150,23 +151,23 @@ Page {
                         
                         Rectangle {
                             anchors.fill: parent
-                            color: "#f0f0f0"
+                            color: Components.ThemeManager.placeholderBackground
                             visible: parent.status === Image.Error || parent.source == ""
-                            
+
                             Column {
                                 anchors.centerIn: parent
                                 spacing: 10
-                                
+
                                 Text {
                                     text: "⚙"
                                     font.pixelSize: 48
-                                    color: "#ccc"
+                                    color: Components.ThemeManager.placeholderText
                                     anchors.horizontalCenter: parent.horizontalCenter
                                 }
-                                
+
                                 Text {
                                     text: "Pattern Preview"
-                                    color: "#999"
+                                    color: Components.ThemeManager.textTertiary
                                     font.pixelSize: 14
                                     anchors.horizontalCenter: parent.horizontalCenter
                                 }
@@ -179,14 +180,14 @@ Page {
                 Rectangle {
                     width: 1
                     height: parent.height
-                    color: "#e5e7eb"
+                    color: Components.ThemeManager.borderColor
                 }
-                
+
                 // Right side - Controls (40% of width)
                 Rectangle {
                     width: parent.width * 0.4 - 1
                     height: parent.height
-                    color: "white"
+                    color: Components.ThemeManager.surfaceColor
                     
                     ScrollView {
                         anchors.fill: parent
@@ -203,21 +204,21 @@ Page {
                             width: parent.width
                             height: 50
                             radius: 8
-                            color: "#f8f9fa"
-                            border.color: "#e5e7eb"
+                            color: Components.ThemeManager.cardColor
+                            border.color: Components.ThemeManager.borderColor
                             border.width: 1
-                            
+
                             Column {
                                 anchors.centerIn: parent
                                 spacing: 4
-                                
+
                                 Label {
                                     text: "Current Pattern"
                                     font.pixelSize: 10
-                                    color: "#666"
+                                    color: Components.ThemeManager.textSecondary
                                     anchors.horizontalCenter: parent.horizontalCenter
                                 }
-                                
+
                                 Label {
                                     text: {
                                         // Use WebSocket current pattern first, then fallback to passed parameter
@@ -225,7 +226,7 @@ Page {
                                         if (backend && backend.currentFile) displayName = backend.currentFile
                                         else if (patternName) displayName = patternName
                                         else return "No pattern running"
-                                        
+
                                         // Clean up the name for display
                                         var parts = displayName.split('/')
                                         displayName = parts[parts.length - 1]
@@ -234,7 +235,7 @@ Page {
                                     }
                                     font.pixelSize: 12
                                     font.bold: true
-                                    color: "#333"
+                                    color: Components.ThemeManager.textPrimary
                                     anchors.horizontalCenter: parent.horizontalCenter
                                     width: parent.parent.width - 20
                                     elide: Text.ElideMiddle
@@ -248,20 +249,20 @@ Page {
                             width: parent.width
                             height: 70
                             radius: 8
-                            color: "#f8f9fa"
-                            border.color: "#e5e7eb"
+                            color: Components.ThemeManager.cardColor
+                            border.color: Components.ThemeManager.borderColor
                             border.width: 1
-                            
+
                             Column {
                                 anchors.fill: parent
                                 anchors.margins: 10
                                 spacing: 8
-                                
+
                                 Label {
                                     text: "Progress"
                                     font.pixelSize: 12
                                     font.bold: true
-                                    color: "#333"
+                                    color: Components.ThemeManager.textPrimary
                                 }
                                 
                                 ProgressBar {
@@ -275,30 +276,30 @@ Page {
                                     anchors.horizontalCenter: parent.horizontalCenter
                                     font.pixelSize: 14
                                     font.bold: true
-                                    color: "#333"
+                                    color: Components.ThemeManager.textPrimary
                                 }
                             }
                         }
-                        
+
                         // Control Buttons
                         Rectangle {
                             width: parent.width
                             height: 90
                             radius: 8
-                            color: "#f8f9fa"
-                            border.color: "#e5e7eb"
+                            color: Components.ThemeManager.cardColor
+                            border.color: Components.ThemeManager.borderColor
                             border.width: 1
-                            
+
                             Column {
                                 anchors.fill: parent
                                 anchors.margins: 10
                                 spacing: 10
-                                
+
                                 Label {
                                     text: "Controls"
                                     font.pixelSize: 12
                                     font.bold: true
-                                    color: "#333"
+                                    color: Components.ThemeManager.textPrimary
                                 }
                                 
                                 // Control buttons row
@@ -399,20 +400,20 @@ Page {
                             width: parent.width
                             height: 120
                             radius: 8
-                            color: "#f8f9fa"
-                            border.color: "#e5e7eb"
+                            color: Components.ThemeManager.cardColor
+                            border.color: Components.ThemeManager.borderColor
                             border.width: 1
-                            
+
                             Column {
                                 anchors.fill: parent
                                 anchors.margins: 10
                                 spacing: 10
-                                
+
                                 Label {
                                     text: "Speed"
                                     font.pixelSize: 12
                                     font.bold: true
-                                    color: "#333"
+                                    color: Components.ThemeManager.textPrimary
                                 }
                                 
                                 // Touch-friendly button row for speed options
@@ -430,17 +431,17 @@ Page {
                                         Rectangle {
                                             width: (speedControlRow.width - 32) / 5  // Distribute evenly with spacing
                                             height: 50
-                                            color: speedControlRow.currentSelection === modelData ? "#2196F3" : "#f0f0f0"
-                                            border.color: speedControlRow.currentSelection === modelData ? "#1976D2" : "#ccc"
+                                            color: speedControlRow.currentSelection === modelData ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                            border.color: speedControlRow.currentSelection === modelData ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                             border.width: 2
                                             radius: 8
-                                            
+
                                             Label {
                                                 anchors.centerIn: parent
                                                 text: modelData
                                                 font.pixelSize: 12
                                                 font.bold: true
-                                                color: speedControlRow.currentSelection === modelData ? "white" : "#333"
+                                                color: speedControlRow.currentSelection === modelData ? "white" : Components.ThemeManager.textPrimary
                                             }
                                             
                                             MouseArea {

dune-weaver-touch/qml/pages/ModernPatternListPage.qml

@@ -2,62 +2,63 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import "../components"
+import "../components" as Components
 
 Page {
     id: page
-    
+
     property var patternModel
     property var backend
     property var stackView
     property bool searchExpanded: false
-    
+
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
     }
-    
+
     ColumnLayout {
         anchors.fill: parent
         spacing: 0
-        
+
         // Header with integrated search
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 50
-            color: "white"
-            
+            color: Components.ThemeManager.surfaceColor
+
             // Bottom border
             Rectangle {
                 anchors.bottom: parent.bottom
                 width: parent.width
                 height: 1
-                color: "#e5e7eb"
+                color: Components.ThemeManager.borderColor
             }
-            
+
             RowLayout {
                 anchors.fill: parent
                 anchors.leftMargin: 15
                 anchors.rightMargin: 10
-                
+
                 ConnectionStatus {
                     backend: page.backend
                     Layout.rightMargin: 8
                     visible: !searchExpanded
                 }
-                
+
                 Label {
                     text: "Browse Patterns"
                     font.pixelSize: 18
                     font.bold: true
-                    color: "#333"
+                    color: Components.ThemeManager.textPrimary
                     visible: !searchExpanded
                 }
-                
+
                 // Pattern count
                 Label {
                     text: patternModel.rowCount() + " patterns"
                     font.pixelSize: 12
-                    color: "#999"
+                    color: Components.ThemeManager.textTertiary
                     visible: !searchExpanded
                 }
                 
@@ -72,25 +73,25 @@ Page {
                     Layout.preferredWidth: searchExpanded ? parent.width - 60 : 120
                     Layout.preferredHeight: 32
                     radius: 16
-                    color: searchExpanded ? "white" : "#f5f5f5"
-                    border.color: searchExpanded ? "#2563eb" : "#e0e0e0"
+                    color: searchExpanded ? Components.ThemeManager.surfaceColor : Components.ThemeManager.cardColor
+                    border.color: searchExpanded ? "#2563eb" : Components.ThemeManager.borderColor
                     border.width: 1
-                    
+
                     Behavior on Layout.preferredWidth {
                         NumberAnimation { duration: 200 }
                     }
-                    
+
                     RowLayout {
                         anchors.fill: parent
                         anchors.leftMargin: 10
                         anchors.rightMargin: 10
                         spacing: 5
-                        
+
                         Text {
                             text: "⌕"
                             font.pixelSize: 16
                             font.family: "sans-serif"
-                            color: searchExpanded ? "#2563eb" : "#6b7280"
+                            color: searchExpanded ? "#2563eb" : Components.ThemeManager.textSecondary
                         }
                         
                         TextField {
@@ -171,7 +172,7 @@ Page {
                         Text {
                             text: searchExpanded || searchField.text.length > 0 ? "Search" : ""
                             font.pixelSize: 12
-                            color: "#999"
+                            color: Components.ThemeManager.textTertiary
                             visible: !searchExpanded && searchField.text.length === 0
                         }
                     }
@@ -253,29 +254,29 @@ Page {
             Layout.fillWidth: true
             Layout.fillHeight: true
             visible: patternModel.rowCount() === 0 && searchField.text !== ""
-            
+
             Column {
                 anchors.centerIn: parent
                 spacing: 20
-                
+
                 Text {
                     text: "⌕"
                     font.pixelSize: 48
                     anchors.horizontalCenter: parent.horizontalCenter
-                    color: "#ccc"
+                    color: Components.ThemeManager.placeholderText
                 }
-                
+
                 Label {
                     text: "No patterns found"
                     anchors.horizontalCenter: parent.horizontalCenter
-                    color: "#999"
+                    color: Components.ThemeManager.textSecondary
                     font.pixelSize: 18
                 }
-                
+
                 Label {
                     text: "Try a different search term"
                     anchors.horizontalCenter: parent.horizontalCenter
-                    color: "#ccc"
+                    color: Components.ThemeManager.textTertiary
                     font.pixelSize: 14
                 }
             }

dune-weaver-touch/qml/pages/ModernPlaylistPage.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import DuneWeaver 1.0
 import "../components"
+import "../components" as Components
 
 Page {
     id: page
@@ -59,14 +60,14 @@ Page {
     
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
     }
-    
+
     // Playlist List View (shown by default)
     Rectangle {
         id: playlistListView
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
         visible: !showingPlaylistDetail
         
         ColumnLayout {
@@ -77,14 +78,14 @@ Page {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.preferredHeight: 50
-                color: "white"
-                
+                color: Components.ThemeManager.surfaceColor
+
                 // Bottom border
                 Rectangle {
                     anchors.bottom: parent.bottom
                     width: parent.width
                     height: 1
-                    color: "#e5e7eb"
+                    color: Components.ThemeManager.borderColor
                 }
                 
                 RowLayout {
@@ -101,13 +102,13 @@ Page {
                         text: "Playlists"
                         font.pixelSize: 18
                         font.bold: true
-                        color: "#333"
+                        color: Components.ThemeManager.textPrimary
                     }
-                    
+
                     Label {
                         text: playlistModel.rowCount() + " playlists"
                         font.pixelSize: 12
-                        color: "#999"
+                        color: Components.ThemeManager.textTertiary
                     }
                     
                     Item { 
@@ -133,9 +134,9 @@ Page {
                 delegate: Rectangle {
                     width: ListView.view.width
                     height: 80
-                    color: "white"
+                    color: Components.ThemeManager.surfaceColor
                     radius: 12
-                    border.color: "#e5e7eb"
+                    border.color: Components.ThemeManager.borderColor
                     border.width: 1
                     
                     // Press animation
@@ -155,8 +156,8 @@ Page {
                             Layout.preferredWidth: 40
                             Layout.preferredHeight: 40
                             radius: 20
-                            color: "#e3f2fd"
-                            
+                            color: Components.ThemeManager.darkMode ? "#1e3a5f" : "#e3f2fd"
+
                             Text {
                                 anchors.centerIn: parent
                                 text: "♪"
@@ -174,14 +175,14 @@ Page {
                                 text: model.name
                                 font.pixelSize: 16
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                                 elide: Text.ElideRight
                                 width: parent.width
                             }
-                            
+
                             Label {
                                 text: model.itemCount + " patterns"
-                                color: "#666"
+                                color: Components.ThemeManager.textSecondary
                                 font.pixelSize: 12
                             }
                         }
@@ -190,7 +191,7 @@ Page {
                         Text {
                             text: "▶"
                             font.pixelSize: 16
-                            color: "#999"
+                            color: Components.ThemeManager.textTertiary
                         }
                     }
                     
@@ -215,22 +216,22 @@ Page {
                         
                         Text {
                             text: "♪"
-                            color: "#ccc"
+                            color: Components.ThemeManager.placeholderText
                             font.pixelSize: 64
                             anchors.horizontalCenter: parent.horizontalCenter
                         }
-                        
+
                         Label {
                             text: "No playlists found"
                             anchors.horizontalCenter: parent.horizontalCenter
-                            color: "#999"
+                            color: Components.ThemeManager.textSecondary
                             font.pixelSize: 18
                         }
-                        
+
                         Label {
                             text: "Create playlists to organize\\nyour pattern collections"
                             anchors.horizontalCenter: parent.horizontalCenter
-                            color: "#ccc"
+                            color: Components.ThemeManager.textTertiary
                             font.pixelSize: 14
                             horizontalAlignment: Text.AlignHCenter
                         }
@@ -244,7 +245,7 @@ Page {
     Rectangle {
         id: playlistDetailView
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
         visible: showingPlaylistDetail
         
         ColumnLayout {
@@ -255,14 +256,14 @@ Page {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.preferredHeight: 50
-                color: "white"
-                
+                color: Components.ThemeManager.surfaceColor
+
                 // Bottom border
                 Rectangle {
                     anchors.bottom: parent.bottom
                     width: parent.width
                     height: 1
-                    color: "#e5e7eb"
+                    color: Components.ThemeManager.borderColor
                 }
                 
                 RowLayout {
@@ -287,15 +288,15 @@ Page {
                         text: selectedPlaylist
                         font.pixelSize: 18
                         font.bold: true
-                        color: "#333"
+                        color: Components.ThemeManager.textPrimary
                         Layout.fillWidth: true
                         elide: Text.ElideRight
                     }
-                    
+
                     Label {
                         text: currentPlaylistPatterns.length + " patterns"
                         font.pixelSize: 12
-                        color: "#999"
+                        color: Components.ThemeManager.textTertiary
                     }
                 }
             }
@@ -313,7 +314,7 @@ Page {
                     Rectangle {
                         width: parent.width * 0.4
                         height: parent.height
-                        color: "white"
+                        color: Components.ThemeManager.surfaceColor
                         
                         ColumnLayout {
                             anchors.fill: parent
@@ -324,7 +325,7 @@ Page {
                                 text: "Patterns"
                                 font.pixelSize: 14
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                             }
                             
                             ScrollView {
@@ -341,9 +342,9 @@ Page {
                                     delegate: Rectangle {
                                         width: patternListView.width
                                         height: 35
-                                        color: index % 2 === 0 ? "#f8f9fa" : "#ffffff"
+                                        color: index % 2 === 0 ? Components.ThemeManager.cardColor : Components.ThemeManager.surfaceColor
                                         radius: 6
-                                        border.color: "#e5e7eb"
+                                        border.color: Components.ThemeManager.borderColor
                                         border.width: 1
                                         
                                         RowLayout {
@@ -354,14 +355,14 @@ Page {
                                             Label {
                                                 text: (index + 1) + "."
                                                 font.pixelSize: 11
-                                                color: "#666"
+                                                color: Components.ThemeManager.textSecondary
                                                 Layout.preferredWidth: 25
                                             }
-                                            
+
                                             Label {
                                                 text: modelData
                                                 font.pixelSize: 11
-                                                color: "#333"
+                                                color: Components.ThemeManager.textPrimary
                                                 Layout.fillWidth: true
                                                 elide: Text.ElideRight
                                             }
@@ -384,14 +385,14 @@ Page {
                                     Text {
                                         text: "♪"
                                         font.pixelSize: 32
-                                        color: "#ccc"
+                                        color: Components.ThemeManager.placeholderText
                                         anchors.horizontalCenter: parent.horizontalCenter
                                     }
-                                    
+
                                     Label {
                                         text: "Empty playlist"
                                         anchors.horizontalCenter: parent.horizontalCenter
-                                        color: "#999"
+                                        color: Components.ThemeManager.textSecondary
                                         font.pixelSize: 14
                                     }
                                 }
@@ -403,14 +404,14 @@ Page {
                     Rectangle {
                         width: 1
                         height: parent.height
-                        color: "#e5e7eb"
+                        color: Components.ThemeManager.borderColor
                     }
-                    
+
                     // Right side - Full height controls (60% of width)
                     Rectangle {
                         width: parent.width * 0.6 - 1
                         height: parent.height
-                        color: "white"
+                        color: Components.ThemeManager.surfaceColor
                         
                         ColumnLayout {
                             anchors.fill: parent
@@ -421,7 +422,7 @@ Page {
                                 text: "Playlist Controls"
                                 font.pixelSize: 16
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                             }
                             
                             // Main execution buttons
@@ -501,8 +502,8 @@ Page {
                                 Layout.fillHeight: true
                                 Layout.minimumHeight: 250
                                 radius: 10
-                                color: "#f8f9fa"
-                                border.color: "#e5e7eb"
+                                color: Components.ThemeManager.cardColor
+                                border.color: Components.ThemeManager.borderColor
                                 border.width: 1
 
                                 ColumnLayout {
@@ -514,7 +515,7 @@ Page {
                                         text: "Settings"
                                         font.pixelSize: 14
                                         font.bold: true
-                                        color: "#333"
+                                        color: Components.ThemeManager.textPrimary
                                     }
 
                                     // Scrollable settings content
@@ -537,7 +538,7 @@ Page {
                                         Label {
                                             text: "Run Mode:"
                                             font.pixelSize: 12
-                                            color: "#666"
+                                            color: Components.ThemeManager.textSecondary
                                             font.bold: true
                                         }
                                         
@@ -575,7 +576,7 @@ Page {
                                         Label {
                                             text: "Pause between patterns:"
                                             font.pixelSize: 12
-                                            color: "#666"
+                                            color: Components.ThemeManager.textSecondary
                                             font.bold: true
                                         }
                                         
@@ -591,17 +592,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "0s" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "0s" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "0s" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "0s" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "0s"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "0s" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "0s" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -620,17 +621,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "1 min" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "1 min" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "1 min" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "1 min" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "1m"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "1 min" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "1 min" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -649,17 +650,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "5 min" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "5 min" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "5 min" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "5 min" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "5m"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "5 min" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "5 min" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -678,17 +679,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "15 min" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "15 min" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "15 min" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "15 min" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "15m"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "15 min" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "15 min" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -707,17 +708,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "30 min" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "30 min" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "30 min" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "30 min" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "30m"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "30 min" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "30 min" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -736,17 +737,17 @@ Page {
                                             Rectangle {
                                                 Layout.preferredWidth: 60
                                                 Layout.preferredHeight: 40
-                                                color: pauseGrid.currentSelection === "1 hour" ? "#2196F3" : "#f0f0f0"
-                                                border.color: pauseGrid.currentSelection === "1 hour" ? "#1976D2" : "#ccc"
+                                                color: pauseGrid.currentSelection === "1 hour" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                                border.color: pauseGrid.currentSelection === "1 hour" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                                 border.width: 2
                                                 radius: 8
-                                                
+
                                                 Label {
                                                     anchors.centerIn: parent
                                                     text: "1h"
                                                     font.pixelSize: 12
                                                     font.bold: true
-                                                    color: pauseGrid.currentSelection === "1 hour" ? "white" : "#333"
+                                                    color: pauseGrid.currentSelection === "1 hour" ? "white" : Components.ThemeManager.textPrimary
                                                 }
                                                 
                                                 MouseArea {
@@ -782,7 +783,7 @@ Page {
                                         Label {
                                             text: "Clear Pattern:"
                                             font.pixelSize: 12
-                                            color: "#666"
+                                            color: Components.ThemeManager.textSecondary
                                             font.bold: true
                                         }
                                         

dune-weaver-touch/qml/pages/PatternDetailPage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import "../components"
+import "../components" as Components
 
 Page {
     id: page
@@ -9,10 +10,10 @@ Page {
     property string patternPath: ""
     property string patternPreview: ""
     property var backend: null
-    
+
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
     }
     
     ColumnLayout {
@@ -23,14 +24,14 @@ Page {
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 50
-            color: "white"
-            
+            color: Components.ThemeManager.surfaceColor
+
             // Bottom border
             Rectangle {
                 anchors.bottom: parent.bottom
                 width: parent.width
                 height: 1
-                color: "#e5e7eb"
+                color: Components.ThemeManager.borderColor
             }
             
             RowLayout {
@@ -55,7 +56,7 @@ Page {
                     elide: Label.ElideRight
                     font.pixelSize: 16
                     font.bold: true
-                    color: "#333"
+                    color: Components.ThemeManager.textPrimary
                 }
             }
         }
@@ -73,33 +74,33 @@ Page {
                 Rectangle {
                     width: parent.width * 0.6
                     height: parent.height
-                    color: "#ffffff"
-                
+                    color: Components.ThemeManager.previewBackground
+
                 Image {
                     anchors.fill: parent
                     anchors.margins: 10
                     source: patternPreview ? "file:///" + patternPreview : ""
                     fillMode: Image.PreserveAspectFit
-                    
+
                     Rectangle {
                         anchors.fill: parent
-                        color: "#f0f0f0"
+                        color: Components.ThemeManager.placeholderBackground
                         visible: parent.status === Image.Error || parent.source == ""
-                        
+
                         Column {
                             anchors.centerIn: parent
                             spacing: 10
-                            
+
                             Text {
                                 text: "○"
                                 font.pixelSize: 48
-                                color: "#ccc"
+                                color: Components.ThemeManager.placeholderText
                                 anchors.horizontalCenter: parent.horizontalCenter
                             }
-                            
+
                             Text {
                                 text: "No Preview Available"
-                                color: "#999"
+                                color: Components.ThemeManager.textSecondary
                                 font.pixelSize: 14
                                 anchors.horizontalCenter: parent.horizontalCenter
                             }
@@ -112,14 +113,14 @@ Page {
                 Rectangle {
                     width: 1
                     height: parent.height
-                    color: "#e5e7eb"
+                    color: Components.ThemeManager.borderColor
                 }
-                
+
                 // Right side - Controls (40% of width)
                 Rectangle {
                     width: parent.width * 0.4 - 1
                     height: parent.height
-                    color: "white"
+                    color: Components.ThemeManager.surfaceColor
                 
                 Column {
                     anchors.fill: parent
@@ -163,10 +164,10 @@ Page {
                         width: parent.width
                         height: 160  // Increased height to fit all options
                         radius: 8
-                        color: "#f8f9fa"
-                        border.color: "#e5e7eb"
+                        color: Components.ThemeManager.cardColor
+                        border.color: Components.ThemeManager.borderColor
                         border.width: 1
-                        
+
                         Column {
                             id: preExecColumn
                             anchors.left: parent.left
@@ -174,12 +175,12 @@ Page {
                             anchors.top: parent.top
                             anchors.margins: 8  // Reduced margins to save space
                             spacing: 6  // Reduced spacing
-                            
+
                             Label {
                                 text: "Pre-Execution"
                                 font.pixelSize: 12
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                             }
                             
                             RadioButton {
@@ -214,10 +215,10 @@ Page {
                         width: parent.width
                         height: 80
                         radius: 8
-                        color: "#f8f9fa"
-                        border.color: "#e5e7eb"
+                        color: Components.ThemeManager.cardColor
+                        border.color: Components.ThemeManager.borderColor
                         border.width: 1
-                        
+
                         Column {
                             id: infoColumn
                             anchors.left: parent.left
@@ -225,26 +226,26 @@ Page {
                             anchors.top: parent.top
                             anchors.margins: 10
                             spacing: 6
-                            
+
                             Label {
                                 text: "Pattern Info"
                                 font.pixelSize: 14
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                             }
-                            
+
                             Label {
                                 text: "Name: " + patternName
                                 font.pixelSize: 11
-                                color: "#666"
+                                color: Components.ThemeManager.textSecondary
                                 elide: Text.ElideRight
                                 width: parent.width
                             }
-                            
+
                             Label {
                                 text: "Type: Sand Pattern"
                                 font.pixelSize: 11
-                                color: "#666"
+                                color: Components.ThemeManager.textSecondary
                             }
                         }
                     }

dune-weaver-touch/qml/pages/TableControlPage.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Effects
 import "../components"
+import "../components" as Components
 
 Page {
     id: page
@@ -67,7 +68,7 @@ Page {
     
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: Components.ThemeManager.backgroundColor
     }
     
     ColumnLayout {
@@ -78,34 +79,34 @@ Page {
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 50
-            color: "white"
-            
+            color: Components.ThemeManager.surfaceColor
+
             Rectangle {
                 anchors.bottom: parent.bottom
                 width: parent.width
                 height: 1
-                color: "#e5e7eb"
+                color: Components.ThemeManager.borderColor
             }
-            
+
             RowLayout {
                 anchors.fill: parent
                 anchors.leftMargin: 15
                 anchors.rightMargin: 10
-                
+
                 ConnectionStatus {
                     backend: page.backend
                     Layout.rightMargin: 8
                 }
-                
+
                 Label {
                     text: "Table Control"
                     font.pixelSize: 18
                     font.bold: true
-                    color: "#333"
+                    color: Components.ThemeManager.textPrimary
                 }
-                
-                Item { 
-                    Layout.fillWidth: true 
+
+                Item {
+                    Layout.fillWidth: true
                 }
             }
         }
@@ -127,18 +128,18 @@ Page {
                     Layout.preferredHeight: 160
                     Layout.margins: 5
                     radius: 8
-                    color: "white"
-                    
+                    color: Components.ThemeManager.surfaceColor
+
                     ColumnLayout {
                         anchors.fill: parent
                         anchors.margins: 15
                         spacing: 10
-                        
+
                         Label {
                             text: "Serial Connection"
                             font.pixelSize: 14
                             font.bold: true
-                            color: "#333"
+                            color: Components.ThemeManager.textPrimary
                         }
                         
                         RowLayout {
@@ -149,27 +150,27 @@ Page {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 40
                                 radius: 6
-                                color: isSerialConnected ? "#e8f5e8" : "#f8f9fa"
-                                border.color: isSerialConnected ? "#4CAF50" : "#e5e7eb"
+                                color: isSerialConnected ? (Components.ThemeManager.darkMode ? "#1b4332" : "#e8f5e8") : Components.ThemeManager.cardColor
+                                border.color: isSerialConnected ? "#4CAF50" : Components.ThemeManager.borderColor
                                 border.width: 1
-                                
+
                                 RowLayout {
                                     anchors.fill: parent
                                     anchors.margins: 8
-                                    
+
                                     Label {
-                                        text: isSerialConnected ? 
+                                        text: isSerialConnected ?
                                               (selectedPort ? `Connected: ${selectedPort}` : "Connected") :
                                               (selectedPort || "No port selected")
-                                        color: isSerialConnected ? "#2e7d32" : (selectedPort ? "#333" : "#999")
+                                        color: isSerialConnected ? "#4CAF50" : (selectedPort ? Components.ThemeManager.textPrimary : Components.ThemeManager.textTertiary)
                                         font.pixelSize: 12
                                         font.bold: isSerialConnected
                                         Layout.fillWidth: true
                                     }
-                                    
+
                                     Text {
                                         text: "▼"
-                                        color: "#666"
+                                        color: Components.ThemeManager.textSecondary
                                         font.pixelSize: 10
                                         visible: !isSerialConnected
                                     }
@@ -250,18 +251,18 @@ Page {
                     Layout.preferredHeight: 100
                     Layout.margins: 5
                     radius: 8
-                    color: "white"
-                    
+                    color: Components.ThemeManager.surfaceColor
+
                     ColumnLayout {
                         anchors.fill: parent
                         anchors.margins: 15
                         spacing: 10
-                        
+
                         Label {
                             text: "Table Movement"
                             font.pixelSize: 14
                             font.bold: true
-                            color: "#333"
+                            color: Components.ThemeManager.textPrimary
                         }
                         
                         GridLayout {
@@ -322,28 +323,28 @@ Page {
                     Layout.preferredHeight: 200  // Reduced from 280 for single row layout
                     Layout.margins: 5
                     radius: 8
-                    color: "white"
-                    
+                    color: Components.ThemeManager.surfaceColor
+
                     ColumnLayout {
                         anchors.fill: parent
                         anchors.margins: 15
                         spacing: 10
-                        
+
                         Label {
                             text: "Auto Play Settings"
                             font.pixelSize: 14
                             font.bold: true
-                            color: "#333"
+                            color: Components.ThemeManager.textPrimary
                         }
-                        
+
                         RowLayout {
                             Layout.fillWidth: true
                             spacing: 10
-                            
+
                             Label {
                                 text: "Auto play on boot:"
                                 font.pixelSize: 12
-                                color: "#666"
+                                color: Components.ThemeManager.textSecondary
                                 Layout.fillWidth: true
                             }
                             
@@ -363,12 +364,12 @@ Page {
                         ColumnLayout {
                             Layout.fillWidth: true
                             spacing: 15
-                            
+
                             Label {
                                 text: "Screen timeout:"
                                 font.pixelSize: 14
                                 font.bold: true
-                                color: "#333"
+                                color: Components.ThemeManager.textPrimary
                                 Layout.alignment: Qt.AlignLeft
                             }
                             
@@ -384,17 +385,17 @@ Page {
                                 Rectangle {
                                     Layout.preferredWidth: 100
                                     Layout.preferredHeight: 50
-                                    color: timeoutGrid.currentSelection === "30 seconds" ? "#2196F3" : "#f0f0f0"
-                                    border.color: timeoutGrid.currentSelection === "30 seconds" ? "#1976D2" : "#ccc"
+                                    color: timeoutGrid.currentSelection === "30 seconds" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                    border.color: timeoutGrid.currentSelection === "30 seconds" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                     border.width: 2
                                     radius: 8
-                                    
+
                                     Label {
                                         anchors.centerIn: parent
                                         text: "30s"
                                         font.pixelSize: 14
                                         font.bold: true
-                                        color: timeoutGrid.currentSelection === "30 seconds" ? "white" : "#333"
+                                        color: timeoutGrid.currentSelection === "30 seconds" ? "white" : Components.ThemeManager.textPrimary
                                     }
                                     
                                     MouseArea {
@@ -412,19 +413,19 @@ Page {
                                 Rectangle {
                                     Layout.preferredWidth: 100
                                     Layout.preferredHeight: 50
-                                    color: timeoutGrid.currentSelection === "1 minute" ? "#2196F3" : "#f0f0f0"
-                                    border.color: timeoutGrid.currentSelection === "1 minute" ? "#1976D2" : "#ccc"
+                                    color: timeoutGrid.currentSelection === "1 minute" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                    border.color: timeoutGrid.currentSelection === "1 minute" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                     border.width: 2
                                     radius: 8
-                                    
+
                                     Label {
                                         anchors.centerIn: parent
                                         text: "1min"
                                         font.pixelSize: 14
                                         font.bold: true
-                                        color: timeoutGrid.currentSelection === "1 minute" ? "white" : "#333"
+                                        color: timeoutGrid.currentSelection === "1 minute" ? "white" : Components.ThemeManager.textPrimary
                                     }
-                                    
+
                                     MouseArea {
                                         anchors.fill: parent
                                         onClicked: {
@@ -435,24 +436,24 @@ Page {
                                         }
                                     }
                                 }
-                                
+
                                 // 5 minutes button
                                 Rectangle {
                                     Layout.preferredWidth: 100
                                     Layout.preferredHeight: 50
-                                    color: timeoutGrid.currentSelection === "5 minutes" ? "#2196F3" : "#f0f0f0"
-                                    border.color: timeoutGrid.currentSelection === "5 minutes" ? "#1976D2" : "#ccc"
+                                    color: timeoutGrid.currentSelection === "5 minutes" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                    border.color: timeoutGrid.currentSelection === "5 minutes" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                     border.width: 2
                                     radius: 8
-                                    
+
                                     Label {
                                         anchors.centerIn: parent
                                         text: "5min"
                                         font.pixelSize: 14
                                         font.bold: true
-                                        color: timeoutGrid.currentSelection === "5 minutes" ? "white" : "#333"
+                                        color: timeoutGrid.currentSelection === "5 minutes" ? "white" : Components.ThemeManager.textPrimary
                                     }
-                                    
+
                                     MouseArea {
                                         anchors.fill: parent
                                         onClicked: {
@@ -463,22 +464,22 @@ Page {
                                         }
                                     }
                                 }
-                                
+
                                 // 10 minutes button
                                 Rectangle {
                                     Layout.preferredWidth: 100
                                     Layout.preferredHeight: 50
-                                    color: timeoutGrid.currentSelection === "10 minutes" ? "#2196F3" : "#f0f0f0"
-                                    border.color: timeoutGrid.currentSelection === "10 minutes" ? "#1976D2" : "#ccc"
+                                    color: timeoutGrid.currentSelection === "10 minutes" ? Components.ThemeManager.selectedBackground : Components.ThemeManager.buttonBackground
+                                    border.color: timeoutGrid.currentSelection === "10 minutes" ? Components.ThemeManager.selectedBorder : Components.ThemeManager.buttonBorder
                                     border.width: 2
                                     radius: 8
-                                    
+
                                     Label {
                                         anchors.centerIn: parent
                                         text: "10min"
                                         font.pixelSize: 14
                                         font.bold: true
-                                        color: timeoutGrid.currentSelection === "10 minutes" ? "white" : "#333"
+                                        color: timeoutGrid.currentSelection === "10 minutes" ? "white" : Components.ThemeManager.textPrimary
                                     }
                                     
                                     MouseArea {
@@ -533,7 +534,50 @@ Page {
                         }
                     }
                 }
-                
+
+                // Theme Settings Section
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 100
+                    Layout.margins: 5
+                    radius: 8
+                    color: Components.ThemeManager.surfaceColor
+
+                    ColumnLayout {
+                        anchors.fill: parent
+                        anchors.margins: 15
+                        spacing: 10
+
+                        Label {
+                            text: "Appearance"
+                            font.pixelSize: 14
+                            font.bold: true
+                            color: Components.ThemeManager.textPrimary
+                        }
+
+                        RowLayout {
+                            Layout.fillWidth: true
+                            spacing: 10
+
+                            Label {
+                                text: "Dark mode:"
+                                font.pixelSize: 12
+                                color: Components.ThemeManager.textSecondary
+                                Layout.fillWidth: true
+                            }
+
+                            Switch {
+                                id: darkModeSwitch
+                                checked: Components.ThemeManager.darkMode
+
+                                onToggled: {
+                                    Components.ThemeManager.darkMode = checked
+                                }
+                            }
+                        }
+                    }
+                }
+
                 // Add some bottom spacing for better scrolling
                 Item {
                     Layout.preferredHeight: 20