From 9eb356a25a71812081a9d31155dbeed429d61bc8 Mon Sep 17 00:00:00 2001
From: Jens Persson <xerxes2@gmail.com>
Date: Wed, 22 Jun 2011 23:39:16 +0200
Subject: [PATCH] added support for themes to qml

---
 data/panucci-all.conf               |   1 +
 data/theme.conf                     |  37 +++
 data/ui/qml/AboutDialog.qml         |  33 +-
 data/ui/qml/AppButton.qml           |   4 +-
 data/ui/qml/ContextMenu.qml         |   4 +-
 data/ui/qml/Filechooser.qml         |  10 +-
 data/ui/qml/Playlist.qml            |   6 +-
 data/ui/qml/PlaylistItemInfo.qml    |  24 +-
 data/ui/qml/SelectableItem.qml      |   2 +-
 data/ui/qml/Settings.qml            | 628 +++++++++++++++---------------------
 data/ui/qml/SettingsButton.qml      |  26 ++
 data/ui/qml/SettingsButtonSmall.qml |  25 ++
 data/ui/qml/SleepTimer.qml          |  10 +-
 data/ui/qml/main.qml                |  16 +-
 setup.py                            |   2 +-
 src/panucci/__init__.py             |   1 +
 src/panucci/qmlui/qmlmain.py        |  54 ++++
 src/panucci/settings.py             |   7 +-
 18 files changed, 462 insertions(+), 428 deletions(-)
 create mode 100644 data/theme.conf
 rewrite data/ui/qml/Settings.qml (66%)
 create mode 100644 data/ui/qml/SettingsButton.qml
 create mode 100644 data/ui/qml/SettingsButtonSmall.qml

diff --git a/data/panucci-all.conf b/data/panucci-all.conf
index ff7c293..98e2cfe 100644
--- a/data/panucci-all.conf
+++ b/data/panucci-all.conf
@@ -32,3 +32,4 @@ button_radius = 10
 progress_color = 7446d7
 progress_background_color = 280671
 font_size = 14
+theme = black
diff --git a/data/theme.conf b/data/theme.conf
new file mode 100644
index 0000000..3165614
--- /dev/null
+++ b/data/theme.conf
@@ -0,0 +1,37 @@
+# Panucci's theme file
+
+[black]
+background = 000
+foreground = eee
+highlight = 444
+button_color = 333
+button_border_color = 666
+progress_color = 666
+progress_background_color = 222
+
+[blue]
+background = 000
+foreground = eee
+highlight = 0D58A6
+button_color = 26517C
+button_border_color = 4188D2
+progress_color = 4188D2
+progress_background_color = 04376C
+
+[pink]
+background = 000
+foreground = eee
+highlight = A600A6
+button_color = 7C1F7C
+button_border_color = D235D2
+progress_color = D235D2
+progress_background_color = 6C006C
+
+[custom]
+background = 000
+foreground = eee
+highlight = 4312ae
+button_color = 472b83
+button_border_color = 7446d7
+progress_color = 7446d7
+progress_background_color = 280671
diff --git a/data/ui/qml/AboutDialog.qml b/data/ui/qml/AboutDialog.qml
index 5f50950..86204f8 100644
--- a/data/ui/qml/AboutDialog.qml
+++ b/data/ui/qml/AboutDialog.qml
@@ -11,7 +11,7 @@ Item {
         onClicked: aboutDialogArea.close()
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -27,7 +27,7 @@ Item {
         y: 10
         font.pixelSize: config.font_size + 3
         font.weight: Font.Bold
-        color: "#" + config.foreground
+        color: themeController.foreground
         text: items[0]
     }
     Text {
@@ -35,7 +35,7 @@ Item {
         x: 90
         y: about_name.y + config.font_size + 13
         font.pixelSize: config.font_size + 1
-        color: "#" + config.foreground
+        color: themeController.foreground
         text: items[1]
     }
     Text {
@@ -43,7 +43,7 @@ Item {
         x: 90
         y: about_text.y + config.font_size + 11
         font.pixelSize: config.font_size + 1
-        color: "#" + config.foreground
+        color: themeController.foreground
         text: items[2]
     }
     Text {
@@ -51,31 +51,8 @@ Item {
         x: 90
         y: about_copyright.y + config.font_size + 11
         font.pixelSize: config.font_size + 1
-        color: "#" + config.highlight
+        color: themeController.highlight
         text: "<a href=\"" + items[3] + "\">" + items[3] + "</a>"
         onLinkActivated: main.open_external_url(link)
     }
-    /*
-    Rectangle {
-        x: 90
-        y: about_website.y + config.font_size + 15
-        color: "#" + config.button_color
-        width: config.button_width
-        height: config.button_height
-        border.color: "#" + config.button_border_color
-        border.width: config.button_border_width
-        radius: 10
-        smooth: true
-
-        Image {
-        anchors.centerIn: parent
-        smooth: true
-        source: "close.png"
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {aboutDialogArea.close()}
-        }
-    }
-    */
 }
diff --git a/data/ui/qml/AppButton.qml b/data/ui/qml/AppButton.qml
index 862fffc..15705ad 100644
--- a/data/ui/qml/AppButton.qml
+++ b/data/ui/qml/AppButton.qml
@@ -9,9 +9,9 @@ Rectangle {
     id: appButton
     width: config.button_width
     height: config.button_height
-    color: "#" + config.button_color
+    color: themeController.button_color
     border.width: config.button_border_width
-    border.color: "#" + config.button_border_color
+    border.color: themeController.button_border_color
     radius: config.button_radius
     smooth: true
     
diff --git a/data/ui/qml/ContextMenu.qml b/data/ui/qml/ContextMenu.qml
index 6202846..8d6fcce 100644
--- a/data/ui/qml/ContextMenu.qml
+++ b/data/ui/qml/ContextMenu.qml
@@ -11,7 +11,7 @@ Item {
         anchors.fill: parent
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -39,7 +39,7 @@ Item {
                     verticalCenter: parent.verticalCenter
                     leftMargin: config.font_size * 5
                 }
-                color: "#" + config.foreground
+                color: themeController.foreground
                 font.pixelSize: parent.height * .3
                 text: modelData.text
             }
diff --git a/data/ui/qml/Filechooser.qml b/data/ui/qml/Filechooser.qml
index 01dbb63..0520cac 100644
--- a/data/ui/qml/Filechooser.qml
+++ b/data/ui/qml/Filechooser.qml
@@ -14,7 +14,7 @@ Item {
         anchors.fill: parent
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -28,7 +28,7 @@ Item {
         header: Item { height: config.font_size }
         footer: Item { height: config.font_size }
 
-        highlight: Rectangle { color: "#" + config.highlight
+        highlight: Rectangle { color: themeController.highlight
                                width: filechooserView.width
                                height: config.font_size * 3
                                y: filechooserView.currentItem?filechooserView.currentItem.y:root.height
@@ -51,7 +51,7 @@ Item {
                     verticalCenter: parent.verticalCenter
                     leftMargin: 40
                 }
-                color: "#" + config.foreground
+                color: themeController.foreground
                 font.pixelSize: config.font_size
                 text: modelData.caption
             }
@@ -71,14 +71,14 @@ Item {
         height: config.font_size * 1.1
         x: 0
         y: root.height - config.button_height - textinput.height - config.button_border_width
-        color: "#" + config.progress_bg_color
+        color: themeController.progress_bg_color
     }
     TextInput {
         id: textinput
         width: root.width
         x: 5
         y: root.height - config.button_height - textinput.height - config.button_border_width
-        color: "#" + config.foreground
+        color: themeController.foreground
         font.pixelSize: config.font_size
         text: filechooserArea.path
     }
diff --git a/data/ui/qml/Playlist.qml b/data/ui/qml/Playlist.qml
index 2aef2a6..6468399 100644
--- a/data/ui/qml/Playlist.qml
+++ b/data/ui/qml/Playlist.qml
@@ -10,7 +10,7 @@ Item {
         anchors.fill: parent
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -23,7 +23,7 @@ Item {
         header: Item { height: config.font_size }
         footer: Item { height: config.font_size }
         
-        highlight: Rectangle { color: "#" + config.highlight
+        highlight: Rectangle { color: themeController.highlight
                                width: playlistView.width
                                height: config.font_size * 3
                                y: playlistView.currentItem.y
@@ -39,7 +39,7 @@ Item {
                     verticalCenter: parent.verticalCenter
                     leftMargin: modelData.bookmark_id == "" ? config.font_size : config.font_size * 2
                 }
-                color: "#" + config.foreground
+                color: themeController.foreground
                 font.pixelSize: config.font_size
                 text: modelData.caption
             }
diff --git a/data/ui/qml/PlaylistItemInfo.qml b/data/ui/qml/PlaylistItemInfo.qml
index d465948..1633f40 100644
--- a/data/ui/qml/PlaylistItemInfo.qml
+++ b/data/ui/qml/PlaylistItemInfo.qml
@@ -13,7 +13,7 @@ Item {
         onClicked: playlistItemInfoArea.close()
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -22,7 +22,7 @@ Item {
         y: config.font_size
         anchors.horizontalCenter: parent.horizontalCenter
         font.pixelSize: config.font_size * 1.5
-        color: "#" + config.foreground
+        color: themeController.foreground
     }
     Flickable {
         id: playlistItemInfoFlick
@@ -48,31 +48,31 @@ Item {
                 text: info_title_str
                 anchors.right: parent.right
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: info_length_str
                 anchors.right: parent.right
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: info_artist_str
                 anchors.right: parent.right
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: info_album_str
                 anchors.right: parent.right
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: info_filepath_str
                 anchors.right: parent.right
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
         }
         Column {
@@ -86,27 +86,27 @@ Item {
             Text {
                 text: playlistItemInfoArea.metadata["title"]
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: playlistItemInfoArea.metadata["length"]
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: playlistItemInfoArea.metadata["artist"]
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: playlistItemInfoArea.metadata["album"]
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
             Text {
                 text: playlistItemInfoArea.metadata["path"]
                 font.pixelSize: config.font_size
-                color: "#" + config.foreground
+                color: themeController.foreground
             }
         }
     }
diff --git a/data/ui/qml/SelectableItem.qml b/data/ui/qml/SelectableItem.qml
index 021f07d..1a774ee 100644
--- a/data/ui/qml/SelectableItem.qml
+++ b/data/ui/qml/SelectableItem.qml
@@ -12,7 +12,7 @@ Item {
     Rectangle {
         id: highlight
         opacity: mouseArea.pressed?.5:0
-        color: "#" + config.highlight
+        color: themeController.highlight
         anchors.fill: parent
 
         Behavior on opacity { NumberAnimation { duration: 150 } }
diff --git a/data/ui/qml/Settings.qml b/data/ui/qml/Settings.qml
dissimilarity index 66%
index f5e40f9..70ab134 100644
--- a/data/ui/qml/Settings.qml
+++ b/data/ui/qml/Settings.qml
@@ -1,360 +1,268 @@
-
-import Qt 4.7
-
-Item {
-    id: settingsArea
-    signal close
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: settingsArea.close()
-    }
-    Rectangle {
-        color: "#" + config.background
-        anchors.fill: parent
-        opacity: .9
-    }
-    Flickable {
-        width: root.width - config.button_width - config.button_border_width
-        height: root.height
-        contentWidth: root.width - config.button_width - config.button_border_width
-        contentHeight: config.font_size * 44.5
-        clip: true
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: settingsArea.close()
-        }
-        Text {
-            y: config.font_size
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: main_window_str
-            font.pixelSize: config.font_size * 1.5
-            color: "#" + config.foreground
-        }
-        Rectangle {
-            id: action_scrolling_labels_button
-            property bool checked
-            checked: action_scrolling_labels.checked
-            y: config.font_size * 3.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_scrolling_labels.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_scrolling_labels_button.checked) {
-                                 action_scrolling_labels_button.checked = false
-                             }
-                             else {
-                                 action_scrolling_labels_button.checked = true
-                             }
-                           }
-            }
-        }
-        Rectangle {
-            id: action_lock_progress_button
-            property bool checked
-            checked: action_lock_progress.checked
-            y: config.font_size * 8.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_lock_progress.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_lock_progress_button.checked) {
-                                 action_lock_progress_button.checked = false
-                             }
-                             else {
-                                 action_lock_progress_button.checked = true
-                             }
-                           }
-            }
-        }
-        Rectangle {
-            id: action_dual_action_button
-            property bool checked
-            checked: action_dual_action.checked
-            y: config.font_size * 13.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_dual_action.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_dual_action_button.checked) {
-                                 action_dual_action_button.checked = false
-                             }
-                             else {
-                                 action_dual_action_button.checked = true
-                             }
-                           }
-            }
-        }
-        Text {
-            y: config.font_size * 19
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: playback_str
-            font.pixelSize: config.font_size * 1.5
-            color: "#" + config.foreground
-        }
-        
-        Rectangle {
-            id: action_stay_at_end_button
-            property bool checked
-            checked: action_stay_at_end.checked
-            y: config.font_size * 21.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_stay_at_end.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_stay_at_end_button.checked) {
-                                 action_stay_at_end_button.checked = false
-                             }
-                             else {
-                                 action_stay_at_end_button.checked = true
-                             }
-                           }
-            }
-        }
-        Rectangle {
-            id: action_seek_back_button
-            property bool checked
-            checked: action_seek_back.checked
-            y: config.font_size * 26.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_seek_back.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_seek_back_button.checked) {
-                                 action_seek_back_button.checked = false
-                             }
-                             else {
-                                 action_seek_back_button.checked = true
-                             }
-                           }
-            }
-        }
-        Rectangle {
-            id: action_resume_all_button
-            property bool checked
-            checked: action_resume_all.checked
-            y: config.font_size * 31.5
-            anchors.horizontalCenter: parent.horizontalCenter
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 2
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_resume_all.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { if (action_resume_all_button.checked) {
-                                 action_resume_all_button.checked = false
-                             }
-                             else {
-                                 action_resume_all_button.checked = true
-                             }
-                           }
-            }
-        }
-        Text {
-            y: config.font_size * 37
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: play_mode_str
-            font.pixelSize: config.font_size * 1.5
-            color: "#" + config.foreground
-        }
-        Rectangle {
-            id: action_play_mode_all_button
-            property bool checked
-            checked: action_play_mode_all.checked
-            y: config.font_size * 39.5
-            x: parent.width / 25
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            width: parent.width / 5
-            height: config.font_size * 4
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_play_mode_all.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { action_play_mode_all_button.checked = true
-                             action_play_mode_single_button.checked = false
-                             action_play_mode_random_button.checked = false
-                             action_play_mode_repeat_button.checked = false
-                           }
-            }
-        }
-        Rectangle {
-            id: action_play_mode_single_button
-            property bool checked
-            checked: action_play_mode_single.checked
-            width: parent.width / 5
-            height: config.font_size * 4
-            y: config.font_size * 39.5
-            x: (parent.width / 25 * 2) + width
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_play_mode_single.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { action_play_mode_all_button.checked = false
-                             action_play_mode_single_button.checked = true
-                             action_play_mode_random_button.checked = false
-                             action_play_mode_repeat_button.checked = false
-                           }
-            }
-        }
-        Rectangle {
-            id: action_play_mode_random_button
-            property bool checked
-            checked: action_play_mode_random.checked
-            width: parent.width / 5
-            height: config.font_size * 4
-            y: config.font_size * 39.5
-            x: (parent.width / 25 * 3) + (width * 2)
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_play_mode_random.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { action_play_mode_all_button.checked = false
-                             action_play_mode_single_button.checked = false
-                             action_play_mode_random_button.checked = true
-                             action_play_mode_repeat_button.checked = false
-                           }
-            }
-        }
-        Rectangle {
-            id: action_play_mode_repeat_button
-            property bool checked
-            checked: action_play_mode_repeat.checked
-            width: parent.width / 5
-            height: config.font_size * 4
-            y: config.font_size * 39.5
-            x: (parent.width / 25 * 4) + (width * 3)
-            color: checked ? "#" + config.progress_color : "#" + config.progress_bg_color
-            radius: config.button_radius
-            smooth: true
-
-            Text {
-                anchors.centerIn: parent
-                text: action_play_mode_repeat.text
-                font.pixelSize: config.font_size
-                color: "#" + config.foreground
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: { action_play_mode_all_button.checked = false
-                             action_play_mode_single_button.checked = false
-                             action_play_mode_random_button.checked = false
-                             action_play_mode_repeat_button.checked = true
-                           }
-            }
-        }
-    }
-    AppButton {
-        x: root.width - config.button_width - config.button_border_width
-        y: root.height - config.button_height
-        image: "apply.png"
-        onClicked: { var i=0
-                     for (i=0;i<settingsArea.actions.length;i++) {
-                         if (settingsArea.actions[i].checked != settingsArea.buttons[i].checked)
-                             settingsArea.actions[i].trigger()
-                     }
-                     settingsArea.close()
-                   }
-    }
-    property variant actions: [action_scrolling_labels, action_lock_progress,
-            action_dual_action, action_stay_at_end, action_seek_back,
-            action_resume_all,
-            action_play_mode_all, action_play_mode_single,
-            action_play_mode_random, action_play_mode_repeat]
-    property variant buttons: [action_scrolling_labels_button, action_lock_progress_button,
-            action_dual_action_button, action_stay_at_end_button, action_seek_back_button,
-            action_resume_all_button,
-            action_play_mode_all_button, action_play_mode_single_button,
-            action_play_mode_random_button, action_play_mode_repeat_button]
-    onClose: { var i=0
-               for (i=0;i<settingsArea.actions.length;i++) {
-                   settingsArea.buttons[i].checked = settingsArea.actions[i].checked
-               }
-             }
-}
+
+import Qt 4.7
+
+Item {
+    id: settingsArea
+    signal close
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: settingsArea.close()
+    }
+    Rectangle {
+        color: themeController.background
+        anchors.fill: parent
+        opacity: .9
+    }
+    Flickable {
+        width: root.width - config.button_width - config.button_border_width
+        height: root.height
+        contentWidth: root.width - config.button_width - config.button_border_width
+        contentHeight: config.font_size * 52.5
+        clip: true
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: settingsArea.close()
+        }
+        Text {
+            y: config.font_size
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: main_window_str
+            font.pixelSize: config.font_size * 1.5
+            color: themeController.foreground
+        }
+        SettingsButton {
+            id: action_scrolling_labels_button
+            checked: action_scrolling_labels.checked
+            y: config.font_size * 3.5
+            text: action_scrolling_labels.text
+            onClicked: { if (action_scrolling_labels_button.checked) {
+                             action_scrolling_labels_button.checked = false
+                         }
+                         else {
+                             action_scrolling_labels_button.checked = true
+                         }
+            }
+        }
+        SettingsButton {
+            id: action_lock_progress_button
+            checked: action_lock_progress.checked
+            y: config.font_size * 8.5
+            text: action_lock_progress.text
+            onClicked: { if (action_lock_progress_button.checked) {
+                             action_lock_progress_button.checked = false
+                         }
+                         else {
+                             action_lock_progress_button.checked = true
+                         }
+            }
+        }
+        SettingsButton {
+            id: action_dual_action_button
+            checked: action_dual_action.checked
+            y: config.font_size * 13.5
+            text: action_dual_action.text
+            onClicked: { if (action_dual_action_button.checked) {
+                             action_dual_action_button.checked = false
+                         }
+                         else {
+                             action_dual_action_button.checked = true
+                         }
+            }
+        }
+        Text {
+            y: config.font_size * 19
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: playback_str
+            font.pixelSize: config.font_size * 1.5
+            color: themeController.foreground
+        }
+        SettingsButton {
+            id: action_stay_at_end_button
+            checked: action_stay_at_end.checked
+            y: config.font_size * 21.5
+            text: action_stay_at_end.text
+            onClicked: { if (action_stay_at_end_button.checked) {
+                             action_stay_at_end_button.checked = false
+                         }
+                         else {
+                             action_stay_at_end_button.checked = true
+                         }
+            }
+        }
+        SettingsButton {
+            id: action_seek_back_button
+            checked: action_seek_back.checked
+            y: config.font_size * 26.5
+            text: action_seek_back.text
+            onClicked: { if (action_seek_back_button.checked) {
+                             action_seek_back_button.checked = false
+                         }
+                         else {
+                             action_seek_back_button.checked = true
+                         }
+            }
+        }
+        SettingsButton {
+            id: action_resume_all_button
+            checked: action_resume_all.checked
+            y: config.font_size * 31.5
+            text: action_resume_all.text
+            onClicked: { if (action_resume_all_button.checked) {
+                             action_resume_all_button.checked = false
+                         }
+                         else {
+                             action_resume_all_button.checked = true
+                         }
+            }
+        }
+        Text {
+            y: config.font_size * 37
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: play_mode_str
+            font.pixelSize: config.font_size * 1.5
+            color: themeController.foreground
+        }
+        SettingsButtonSmall {
+            id: action_play_mode_all_button
+            checked: action_play_mode_all.checked
+            y: config.font_size * 39.5
+            x: parent.width / 25
+            text: action_play_mode_all.text
+            onClicked: { action_play_mode_all_button.checked = true
+                         action_play_mode_single_button.checked = false
+                         action_play_mode_random_button.checked = false
+                         action_play_mode_repeat_button.checked = false
+           }
+        }
+        SettingsButtonSmall {
+            id: action_play_mode_single_button
+            checked: action_play_mode_single.checked
+            width: parent.width / 5
+            height: config.font_size * 4
+            y: config.font_size * 39.5
+            x: (parent.width / 25 * 2) + width
+            text: action_play_mode_single.text
+            onClicked: { action_play_mode_all_button.checked = false
+                         action_play_mode_single_button.checked = true
+                         action_play_mode_random_button.checked = false
+                         action_play_mode_repeat_button.checked = false
+            }
+        }
+        SettingsButtonSmall {
+            id: action_play_mode_random_button
+            checked: action_play_mode_random.checked
+            width: parent.width / 5
+            height: config.font_size * 4
+            y: config.font_size * 39.5
+            x: (parent.width / 25 * 3) + (width * 2)
+            text: action_play_mode_random.text
+            onClicked: { action_play_mode_all_button.checked = false
+                         action_play_mode_single_button.checked = false
+                         action_play_mode_random_button.checked = true
+                         action_play_mode_repeat_button.checked = false
+            }
+        }
+        SettingsButtonSmall {
+            id: action_play_mode_repeat_button
+            checked: action_play_mode_repeat.checked
+            width: parent.width / 5
+            height: config.font_size * 4
+            y: config.font_size * 39.5
+            x: (parent.width / 25 * 4) + (width * 3)
+            text: action_play_mode_repeat.text
+            onClicked: { action_play_mode_all_button.checked = false
+                         action_play_mode_single_button.checked = false
+                         action_play_mode_random_button.checked = false
+                         action_play_mode_repeat_button.checked = true
+            }
+        }
+        Text {
+            y: config.font_size * 45
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: theme_str
+            font.pixelSize: config.font_size * 1.5
+            color: themeController.foreground
+        }
+        SettingsButtonSmall {
+            id: theme_black
+            y: config.font_size * 47.5
+            x: parent.width / 25
+            text: "Black "
+            checked: config.theme + " " == text.toLowerCase() ? true : false
+            onClicked: { theme_black.checked = true
+                         theme_blue.checked = false
+                         theme_pink.checked = false
+                         theme_custom.checked = false
+                         themeController.set_theme(text)
+            }
+        }
+        SettingsButtonSmall {
+            id: theme_blue
+            y: config.font_size * 47.5
+            x: (parent.width / 25 * 2) + width
+            text: "Blue "
+            checked: config.theme + " " == text.toLowerCase() ? true : false
+            onClicked: { theme_black.checked = false
+                         theme_blue.checked = true
+                         theme_pink.checked = false
+                         theme_custom.checked = false
+                         themeController.set_theme(text)
+            }
+        }
+        SettingsButtonSmall {
+            id: theme_pink
+            y: config.font_size * 47.5
+            x: (parent.width / 25 * 3) + (width * 2)
+            text: "Pink "
+            checked: config.theme + " " == text.toLowerCase() ? true : false
+            onClicked: { theme_black.checked = false
+                         theme_blue.checked = false
+                         theme_pink.checked = true
+                         theme_custom.checked = false
+                         themeController.set_theme(text)
+            }
+        }
+        SettingsButtonSmall {
+            id: theme_custom
+            y: config.font_size * 47.5
+            x: (parent.width / 25 * 4) + (width * 3)
+            text: "Custom"
+            checked: config.theme + " " == text.toLowerCase() ? true : false
+            onClicked: { theme_black.checked = false
+                         theme_blue.checked = false
+                         theme_pink.checked = false
+                         theme_custom.checked = true
+                         themeController.set_theme(text)
+            }
+        }
+    }
+    AppButton {
+        x: root.width - config.button_width - config.button_border_width
+        y: root.height - config.button_height
+        image: "apply.png"
+        onClicked: { var i=0
+                     for (i=0;i<settingsArea.actions.length;i++) {
+                         if (settingsArea.actions[i].checked != settingsArea.buttons[i].checked)
+                             settingsArea.actions[i].trigger()
+                     }
+                     settingsArea.close()
+                   }
+    }
+    property variant actions: [action_scrolling_labels, action_lock_progress,
+            action_dual_action, action_stay_at_end, action_seek_back,
+            action_resume_all,
+            action_play_mode_all, action_play_mode_single,
+            action_play_mode_random, action_play_mode_repeat]
+    property variant buttons: [action_scrolling_labels_button, action_lock_progress_button,
+            action_dual_action_button, action_stay_at_end_button, action_seek_back_button,
+            action_resume_all_button,
+            action_play_mode_all_button, action_play_mode_single_button,
+            action_play_mode_random_button, action_play_mode_repeat_button]
+    onClose: { var i=0
+               for (i=0;i<settingsArea.actions.length;i++) {
+                   settingsArea.buttons[i].checked = settingsArea.actions[i].checked
+               }
+             }
+}
diff --git a/data/ui/qml/SettingsButton.qml b/data/ui/qml/SettingsButton.qml
new file mode 100644
index 0000000..4da3a9b
--- /dev/null
+++ b/data/ui/qml/SettingsButton.qml
@@ -0,0 +1,26 @@
+
+import Qt 4.7
+
+Rectangle {
+    id: settingsButton
+    property bool checked: false
+    property variant text: ""
+    signal clicked
+    anchors.horizontalCenter: parent.horizontalCenter
+    color: checked ? themeController.progress_color : themeController.progress_bg_color
+    width: parent.width / 2
+    height: config.font_size * 4
+    radius: config.button_radius
+    smooth: true
+
+    Text {
+        anchors.centerIn: parent
+        text: settingsButton.text
+        font.pixelSize: config.font_size
+        color: themeController.foreground
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: settingsButton.clicked()
+    }
+}
diff --git a/data/ui/qml/SettingsButtonSmall.qml b/data/ui/qml/SettingsButtonSmall.qml
new file mode 100644
index 0000000..8abec08
--- /dev/null
+++ b/data/ui/qml/SettingsButtonSmall.qml
@@ -0,0 +1,25 @@
+
+import Qt 4.7
+
+Rectangle {
+    id: settingsButtonSmall
+    property bool checked: false
+    property variant text: ""
+    signal clicked
+    color: checked ? themeController.progress_color : themeController.progress_bg_color
+    width: parent.width / 5
+    height: config.font_size * 4
+    radius: config.button_radius
+    smooth: true
+
+    Text {
+        anchors.centerIn: parent
+        text: settingsButtonSmall.text
+        font.pixelSize: config.font_size
+        color: themeController.foreground
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: settingsButtonSmall.clicked()
+    }
+}
diff --git a/data/ui/qml/SleepTimer.qml b/data/ui/qml/SleepTimer.qml
index 9dcbc04..08917e5 100644
--- a/data/ui/qml/SleepTimer.qml
+++ b/data/ui/qml/SleepTimer.qml
@@ -10,7 +10,7 @@ Item {
         onClicked: sleepTimerArea.close()
     }
     Rectangle {
-        color: "#" + config.background
+        color: themeController.background
         anchors.fill: parent
         opacity: .9
     }
@@ -19,7 +19,7 @@ Item {
         y: config.font_size
         anchors.horizontalCenter: parent.horizontalCenter
         font.pixelSize: config.font_size * 1.5
-        color: "#" + config.foreground
+        color: themeController.foreground
     }
     Rectangle {
         id: valuebar
@@ -27,7 +27,7 @@ Item {
         height: config.font_size * 3
         y: config.font_size * 3.5
         anchors.horizontalCenter: parent.horizontalCenter
-        color: "#" + config.progress_bg_color
+        color: themeController.progress_bg_color
 
         MouseArea {
             anchors.fill: parent
@@ -38,7 +38,7 @@ Item {
         Rectangle {
             id: progress
             width: 0
-            color: "#" + config.progress_color
+            color: themeController.progress_color
             anchors {
                 top: parent.top
                 bottom: parent.bottom
@@ -51,7 +51,7 @@ Item {
         text: "1"
         anchors.centerIn: valuebar
         font.pixelSize: config.font_size * 1.5
-        color: "#" + config.foreground
+        color: themeController.foreground
     }
     AppButton {
         anchors.horizontalCenter: parent.horizontalCenter
diff --git a/data/ui/qml/main.qml b/data/ui/qml/main.qml
index 1f335bd..993ce89 100644
--- a/data/ui/qml/main.qml
+++ b/data/ui/qml/main.qml
@@ -3,7 +3,7 @@ import Qt 4.7
 
 Rectangle {
     id: root
-    color: "#" + config.background
+    color: themeController.background
     width: config.main_width
     height: config.main_height
 
@@ -131,7 +131,7 @@ Rectangle {
         x: config.cover_height + 5
         y: config.cover_height / 4
         font.pixelSize: config.font_size + 1
-        color: "#" + config.foreground
+        color: themeController.foreground
         text: main.artist_string
     }
     Text {
@@ -139,7 +139,7 @@ Rectangle {
         x: config.cover_height + 5
         y: (config.cover_height / 4) + config.font_size + 21
         font.pixelSize: config.font_size - 1
-        color: "#" + config.foreground
+        color: themeController.foreground
         text: main.album_string
     }
     Rectangle {
@@ -148,13 +148,13 @@ Rectangle {
         height: config.font_size + 3
         x: config.cover_height + 5
         y: (config.cover_height / 4) + ((config.font_size*2)) + 42
-        color: "#" + config.background
+        color: themeController.background
         clip: true
         Text {
             id: title
             font.pixelSize: config.font_size + 1
             font.weight: Font.Bold
-            color: "#" + config.foreground
+            color: themeController.foreground
             text: main.title_string
             property bool direction
             direction: true
@@ -168,7 +168,7 @@ Rectangle {
         y: config.main_height - config.button_height - config.progress_height - config.button_border_width
         width: config.main_width
         height: config.progress_height
-        color: "#" + config.progress_bg_color
+        color: themeController.progress_bg_color
 
         MouseArea {
             anchors.fill: parent
@@ -176,7 +176,7 @@ Rectangle {
         }
         Rectangle {
             width: parent.width*main.progress
-            color: "#" + config.progress_color
+            color: themeController.progress_color
             clip: true
             anchors {
                 top: parent.top
@@ -187,7 +187,7 @@ Rectangle {
     }
     Text {
         anchors.centerIn: progressBar
-        color: "#" + config.foreground
+        color: themeController.foreground
         font.pixelSize: config.font_size
         text: main.time_string
         verticalAlignment: Text.AlignVCenter
diff --git a/setup.py b/setup.py
index 810204b..2433e66 100644
--- a/setup.py
+++ b/setup.py
@@ -40,7 +40,7 @@ if not os.path.exists('data/panucci.service') and 'clean' not in sys.argv:
 DATA_FILES = [
     ('share/panucci', glob.glob('icons/*.png')),
     ('share/panucci', glob.glob('data/ui/qml/*')),
-    ('share/panucci', ['data/panucci.conf', 'data/panucci-all.conf']),
+    ('share/panucci', ['data/panucci.conf', 'data/panucci-all.conf', 'data/theme.conf']),
     ('share/applications', ['data/panucci.desktop']),
     ('share/icons/hicolor/scalable/apps', ['data/panucci.svg']),
     ('share/icons/hicolor/64x64/apps', ['data/panucci.png']),
diff --git a/src/panucci/__init__.py b/src/panucci/__init__.py
index 9556258..4a0b97d 100644
--- a/src/panucci/__init__.py
+++ b/src/panucci/__init__.py
@@ -16,5 +16,6 @@ SETTINGS_FILE = os.path.join(HOME, 'panucci.conf')
 DATABASE_FILE = os.path.join(HOME, 'panucci.sqlite')
 PLAYLIST_FILE = os.path.join(HOME, 'panucci.m3u')
 LOGFILE = os.path.join(HOME, 'panucci.log')
+THEME_FILE = os.path.join(HOME, 'theme.conf')
 
 EXTENSIONS = ('mp2', 'mp3', 'mp4', 'ogg', 'm4a', 'wav', 'flac')
diff --git a/src/panucci/qmlui/qmlmain.py b/src/panucci/qmlui/qmlmain.py
index 869a418..7f4d2da 100644
--- a/src/panucci/qmlui/qmlmain.py
+++ b/src/panucci/qmlui/qmlmain.py
@@ -19,6 +19,7 @@
 import sys
 import os
 import logging
+import ConfigParser
 
 from PySide import QtCore
 from PySide import QtGui
@@ -51,6 +52,8 @@ class PanucciGUI(QtCore.QObject, ObservableService):
         self.context = self.view.rootContext()
         self.context.setContextProperty('main', self)
         self.context.setContextProperty('config', self.make_config())
+        self.theme_controller = ThemeController(self.config)
+        self.context.setContextProperty('themeController', self.theme_controller)
         self.create_actions()
         engine = self.context.engine()
         self.image_provider = ImageProvider(self)
@@ -173,6 +176,8 @@ class PanucciGUI(QtCore.QObject, ObservableService):
             self.action_play_mode_repeat.setChecked(True)
         else:
             self.action_play_mode_all.setChecked(True)
+        self.theme_str = _('Theme').decode("utf-8")
+        self.context.setContextProperty('theme_str', self.theme_str)
         # help menu
         self.action_about = QtGui.QAction(QtGui.QIcon('about.png'), _("About").decode("utf-8"), self.main_window,
             statusTip="Show about dialog", triggered=self.about_callback)
@@ -234,6 +239,7 @@ class PanucciGUI(QtCore.QObject, ObservableService):
         self.config_qml["dual_delay"] = self.config.getfloat("options", "dual_action_button_delay") * 1000
         self.config_qml["scrolling"] = self.config.getboolean("options", "scrolling_labels") * 1000
         self.config_qml["button_width"] = (self.config_qml["main_width"] / 6) - 7
+        self.config_qml["theme"] = self.config.get("options", "theme")
         return self.config_qml
 
     def quit_panucci(self):
@@ -639,3 +645,51 @@ class FilechooserItem(QtCore.QObject):
     caption = QtCore.Property(unicode, _get_caption, notify=changed)
     path = QtCore.Property(unicode, _get_path, notify=changed)
     directory = QtCore.Property(bool, _get_directory, notify=changed)
+
+class ThemeController(QtCore.QObject):
+    def __init__(self, config):
+        QtCore.QObject.__init__(self)
+
+        self.config = config
+        self.config_theme = ConfigParser.SafeConfigParser()
+        #_file = open(util.find_data_file("theme-all.conf"))
+        #self.config.readfp(_file)
+        #_file.close()
+        _file = open(panucci.THEME_FILE)
+        self.config_theme.readfp(_file)
+        _file.close()
+
+    @QtCore.Slot(str)
+    def set_theme(self, theme):
+        self.config.set("options", "theme", theme.strip().lower())
+        self.changed.emit()
+
+    def _get_background(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "background")
+
+    def _get_foreground(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "foreground")
+
+    def _get_highlight(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "highlight")
+
+    def _get_button_color(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "button_color")
+
+    def _get_button_border_color(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "button_border_color")
+
+    def _get_progress_color(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "progress_color")
+
+    def _get_progress_bg_color(self):
+        return "#" + self.config_theme.get(self.config.get("options", "theme"), "progress_background_color")
+
+    changed = QtCore.Signal()
+    background = QtCore.Property(str, _get_background, notify=changed)
+    foreground = QtCore.Property(str, _get_foreground, notify=changed)
+    highlight = QtCore.Property(str, _get_highlight, notify=changed)
+    button_color = QtCore.Property(str, _get_button_color, notify=changed)
+    button_border_color = QtCore.Property(str, _get_button_border_color, notify=changed)
+    progress_color = QtCore.Property(str, _get_progress_color, notify=changed)
+    progress_bg_color = QtCore.Property(str, _get_progress_bg_color, notify=changed)
diff --git a/src/panucci/settings.py b/src/panucci/settings.py
index fd156a8..b3aa9bd 100644
--- a/src/panucci/settings.py
+++ b/src/panucci/settings.py
@@ -30,6 +30,11 @@ if not os.path.exists(panucci.SETTINGS_FILE):
     _filepath = util.find_data_file("panucci.conf")
     shutil.copy(_filepath, panucci.HOME)
 
+if not os.path.exists(panucci.THEME_FILE):
+    import shutil
+    _filepath = util.find_data_file("theme.conf")
+    shutil.copy(_filepath, panucci.HOME)
+
 class Settings(object):
     def __init__(self):
         self.__log = logging.getLogger('panucci.settings.Settings')
@@ -38,7 +43,7 @@ class Settings(object):
         _file = open(util.find_data_file("panucci-all.conf"))
         self.config.readfp(_file)
         _file.close()
-        # Parse non editable 
+        # Parse non editable
         if os.path.exists(panucci.HOME + '/panucci-noedit.conf'):
             _file = open(panucci.HOME + "/panucci-noedit.conf")
             self.config.readfp(_file)
-- 
2.11.4.GIT