Switchable theme (Dark or Light).

43 files changed, 247 insertions, 148 deletions

diff --git a/qml/AboutDialog.qml b/qml/AboutDialog.qml
index 97876ef..e097092 100644
--- a/qml/AboutDialog.qml
+++ b/qml/AboutDialog.qml
@@ -84,6 +84,7 @@ Dialog {
                     x: genericDialog.platformStyle.titleBarIndent
                     font.family: UI.FONT_FAMILY
                     font.pixelSize: UI.FONT_XLARGE
+                    color: UI.COLOR_INVERTED_FOREGROUND
                     text: genericDialog.titleText
                 }
 
@@ -116,16 +117,19 @@ Dialog {
         Label {
             text: "Version 1.2.1"
             font.pixelSize: UI.FONT_LSMALL
+            color: UI.COLOR_INVERTED_FOREGROUND
         }
 
         Label {
             text: "Copyright \u00a9 2011 Yoann Lopes"
             font.pixelSize: UI.FONT_LSMALL
+            color: UI.COLOR_INVERTED_FOREGROUND
         }
 
         Label {
             text: "Contact: yoann.lopes@gmail.com"
             font.pixelSize: UI.FONT_LSMALL
+            color: UI.COLOR_INVERTED_FOREGROUND
         }
 
         Item {
diff --git a/qml/AlbumDelegate.qml b/qml/AlbumDelegate.qml
index c2ce642..bccc37f 100644
--- a/qml/AlbumDelegate.qml
+++ b/qml/AlbumDelegate.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -75,8 +75,8 @@ Item {
         PauseAnimation { duration: 200 }
         ParallelAnimation {
             NumberAnimation { target: background; property: "opacity"; to: 0.4; duration: 300 }
-            ColorAnimation { target: mainText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: subText; property: "color"; to: "black"; duration: 300 }
+            ColorAnimation { target: mainText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: subText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
             NumberAnimation { target: coverContainer; property: "opacity"; to: 0.2; duration: 300 }
         }
         PauseAnimation { duration: 100 }
@@ -90,6 +90,14 @@ Item {
         }
     }
 
+    Connections {
+        target: theme
+        onInvertedChanged: {
+            mainText.color = listItem.titleColor
+            subText.color = listItem.subtitleColor
+        }
+    }
+
     Rectangle {
         id: background
         anchors.fill: parent
@@ -97,7 +105,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : 0.0
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Label {
@@ -117,7 +125,7 @@ Item {
         width: 64; height: width
         anchors.left: indexText.right
         anchors.verticalCenter: parent.verticalCenter
-        color: "#202020"
+        color: theme.inverted ? "#202020" : "#C9C9C9"
         opacity: listItem.available ? 1.0 : 0.3
 
         SpotifyImage {
diff --git a/qml/AlbumTrackDelegate.qml b/qml/AlbumTrackDelegate.qml
index 350d8d4..87c5e80 100644
--- a/qml/AlbumTrackDelegate.qml
+++ b/qml/AlbumTrackDelegate.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -77,8 +77,8 @@ Item {
         PauseAnimation { duration: 200 }
         ParallelAnimation {
             NumberAnimation { target: background; property: "opacity"; to: 0.4; duration: 300 }
-            ColorAnimation { target: mainText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: timing; property: "color"; to: "black"; duration: 300 }
+            ColorAnimation { target: mainText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: timing; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
             NumberAnimation { target: iconItem; property: "opacity"; to: 0.2; duration: 300 }
         }
         PauseAnimation { duration: 100 }
@@ -92,6 +92,14 @@ Item {
         }
     }
 
+    Connections {
+        target: theme
+        onInvertedChanged: {
+            mainText.color = highlighted ? listItem.highlightColor : listItem.titleColor
+            timing.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+        }
+    }
+
     onHighlightedChanged: {
         mainText.color = highlighted ? listItem.highlightColor : listItem.titleColor
         timing.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
@@ -104,7 +112,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : 0.0
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Item {
@@ -136,7 +144,7 @@ Item {
             width: 34; height: width
             smooth: true
             visible: listItem.starred
-            source: "image://theme/icon-m-toolbar-favorite-mark-white"
+            source: "image://theme/icon-m-toolbar-favorite-mark" + (theme.inverted ? "-white" : "")
         }
 
         Label {
diff --git a/qml/ArtistDelegate.qml b/qml/ArtistDelegate.qml
index 619da9c..5397136 100644
--- a/qml/ArtistDelegate.qml
+++ b/qml/ArtistDelegate.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -70,7 +70,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : 0.0
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Label {
@@ -90,12 +90,12 @@ Item {
         width: 64; height: width
         anchors.left: indexText.right
         anchors.verticalCenter: parent.verticalCenter
-        color: "#202020"
+        color: theme.inverted ? "#202020" : "#C9C9C9"
 
         SpotifyImage {
             id: portraitImage
             anchors.fill: parent
-            defaultImage: "image://theme/icon-m-toolbar-contact-selected"
+            defaultImage: theme.inverted ? "images/icon-l-contact-avatar-placeholder.png" : "images/icon-l-contact-avatar-placeholder-black.png"
         }
     }
 
diff --git a/qml/ArtistHeader.qml b/qml/ArtistHeader.qml
index 006f611..8ce6ac9 100644
--- a/qml/ArtistHeader.qml
+++ b/qml/ArtistHeader.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -66,20 +66,15 @@ Column {
             height: parent.height
             width: height
             anchors.left: parent.left
-            color: "#202020"
+            color: theme.inverted ? "#202020" : "#C9C9C9"
             visible: albumCount.length > 0 || singleCount.length > 0 || compilationCount.length > 0
             SpotifyImage {
                 id: coverImage
                 anchors.fill: parent
                 fillMode: Image.PreserveAspectCrop
+                defaultImage: theme.inverted ? "images/icon-l-contact-avatar-placeholder-big.png" : "images/icon-l-contact-avatar-placeholder-black-big.png"
                 clip: true
             }
-            Image {
-                visible: coverImage.source == ""
-                anchors.fill: parent
-                smooth: true
-                source: "image://theme/icon-l-contact-avatar-placeholder"
-            }
         }
 
         Column {
diff --git a/qml/FolderPage.qml b/qml/FolderPage.qml
index 95faaf1..d61a530 100644
--- a/qml/FolderPage.qml
+++ b/qml/FolderPage.qml
@@ -89,6 +89,7 @@ Page {
         Component.onCompleted: positionViewAtBeginning()
 
         delegate: PlaylistDelegate {
+            id: playlistDelegate
             title: (modelData.type === SpotifyPlaylist.Playlist || modelData.type === SpotifyPlaylist.Folder ? modelData.name
                                                                                                            : (modelData.type === SpotifyPlaylist.Starred ? "Starred"
                                                                                                                                                         : "Inbox"))
@@ -125,16 +126,24 @@ Page {
             onPressAndHold: { menu.playlist = modelData; menu.open(); }
 
             property string staticIcon
-            Component.onCompleted: {
+
+            function updateIcon() {
                 if (modelData.type === SpotifyPlaylist.Playlist)
-                    staticIcon = "image://theme/icon-m-music-video-all-songs";
+                    staticIcon = theme.inverted ? "image://theme/icon-m-music-video-all-songs" : "images/icon-m-music-video-all-songs-black.png";
                 else if (modelData.type === SpotifyPlaylist.Starred)
-                    staticIcon = "image://theme/icon-m-common-favorite-mark-inverse";
+                    staticIcon = "image://theme/icon-m-common-favorite-mark" + (theme.inverted ? "-inverse" : "");
                 else if (modelData.type === SpotifyPlaylist.Inbox)
-                    staticIcon = "image://theme/icon-m-toolbar-directory-move-to-white-selected";
+                    staticIcon = theme.inverted ? "image://theme/icon-m-toolbar-directory-move-to-white-selected" : "images/icon-m-toolbar-directory-move-to-black.png";
                 else if (modelData.type === SpotifyPlaylist.Folder)
-                    staticIcon = "image://theme/icon-m-toolbar-directory-selected"
+                    staticIcon = theme.inverted ? "image://theme/icon-m-toolbar-directory-selected" : "images/icon-m-toolbar-directory-black.png"
+            }
+
+            Connections {
+                target: theme
+                onInvertedChanged: playlistDelegate.updateIcon()
             }
+
+            Component.onCompleted: updateIcon()
         }
 
         header: ViewHeader {
diff --git a/qml/FullControls.qml b/qml/FullControls.qml
index 1f16acc..829bfbc 100644
--- a/qml/FullControls.qml
+++ b/qml/FullControls.qml
@@ -121,7 +121,7 @@ Column {
 
         front: Rectangle {
             anchors.fill: parent
-            color: "#202020"
+            color: theme.inverted ? "#202020" : "#C9C9C9"
 
             ListView {
                 id: coverList
@@ -164,7 +164,7 @@ Column {
                 anchors.bottom: parent.bottom
                 width: parent.width
                 height: detailsColumn.height + UI.MARGIN_XLARGE
-                color: moreMouseArea.pressed ? "#DD202020" : "#BA202020"
+                color: (moreMouseArea.pressed ? "#DD" : "#BA") + (theme.inverted ? "202020" : "D7D7D7")
 
                 Column {
                     id: detailsColumn
@@ -180,7 +180,7 @@ Column {
                         font.family: UI.FONT_FAMILY
                         font.weight: Font.Bold
                         font.pixelSize: UI.FONT_DEFAULT
-                        color: UI.COLOR_INVERTED_FOREGROUND
+                        color: theme.inverted ? UI.COLOR_INVERTED_FOREGROUND : UI.COLOR_FOREGROUND
                         elide: Text.ElideRight
                         opacity: details.opacity
                         text: spotifySession.currentTrack ? spotifySession.currentTrack.name : ""
@@ -201,7 +201,7 @@ Column {
                                 width: parent.width
                                 font.family: UI.FONT_FAMILY
                                 font.pixelSize: UI.FONT_LSMALL
-                                color: UI.LIST_SUBTITLE_COLOR_INVERTED
+                                color: theme.inverted ? UI.LIST_SUBTITLE_COLOR_INVERTED : UI.LIST_SUBTITLE_COLOR
                                 elide: Text.ElideRight
                                 anchors.left: parent.left
                                 anchors.right: parent.right
@@ -211,7 +211,7 @@ Column {
                                 width: parent.width
                                 font.family: UI.FONT_FAMILY
                                 font.pixelSize: UI.FONT_LSMALL
-                                color: UI.LIST_SUBTITLE_COLOR_INVERTED
+                                color: theme.inverted ? UI.LIST_SUBTITLE_COLOR_INVERTED : UI.LIST_SUBTITLE_COLOR
                                 elide: Text.ElideRight
                                 anchors.left: parent.left
                                 anchors.right: parent.right
@@ -222,7 +222,7 @@ Column {
                             id: moreIcon
                             anchors.right: parent.right
                             anchors.verticalCenter: parent.verticalCenter
-                            source: "image://theme/icon-s-description-inverse"
+                            source: "image://theme/icon-s-description" + (theme.inverted ? "-inverse" : "")
                             visible: !spotifySession.offlineMode
                         }
                         MouseArea {
@@ -246,7 +246,7 @@ Column {
                 anchors.right: parent.right
                 contentMargins: UI.MARGIN_XLARGE
                 text: "Play queue"
-                color: "black"
+                color: theme.inverted ? UI.COLOR_INVERTED_BACKGROUND : UI.COLOR_BACKGROUND
                 contentOpacity: queueHeaderMouse.pressed ? 0.4 : 1.0
                 z: 500
 
@@ -271,9 +271,9 @@ Column {
                 delegate: TrackDelegate {
                     property bool isExplicit: spotifySession.playQueue.isExplicitTrack(index)
                     name: modelData.name
-                    backgroundOpacity: isExplicit ? 0.7 : 0.0
-                    titleColor: isExplicit ? "#f5e8b9" : UI.LIST_TITLE_COLOR_INVERTED
-                    subtitleColor: isExplicit ? "#e0d3a5" : UI.LIST_SUBTITLE_COLOR_INVERTED
+                    backgroundOpacity: isExplicit ? 0.6 : 0.0
+                    titleColor: isExplicit ? (theme.inverted ? "#f5e8b9" : "#c6a83f") : (theme.inverted ? UI.LIST_TITLE_COLOR_INVERTED : UI.LIST_TITLE_COLOR)
+                    subtitleColor: isExplicit ? (theme.inverted ? "#e0d3a5" : "#a79144") : (theme.inverted ? UI.LIST_SUBTITLE_COLOR_INVERTED : UI.LIST_SUBTITLE_COLOR)
                     artistAndAlbum: modelData.artists + " | " + modelData.album
                     duration: modelData.duration
                     highlighted: index == spotifySession.playQueue.currentIndex
@@ -311,7 +311,7 @@ Column {
             Image {
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
-                source: "image://theme/icon-m-toolbar-mediacontrol-previous-white"
+                source: "image://theme/icon-m-toolbar-mediacontrol-previous" + (theme.inverted ? "-white" : "")
                 opacity: previous.pressed ? 0.4 : 1.0
 
                 MouseArea {
@@ -324,8 +324,8 @@ Column {
             Image {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
-                source: spotifySession.isPlaying ? "image://theme/icon-m-toolbar-mediacontrol-pause-white"
-                                                 : "image://theme/icon-m-toolbar-mediacontrol-play-white"
+                source: spotifySession.isPlaying ? "image://theme/icon-m-toolbar-mediacontrol-pause" + (theme.inverted ? "-white" : "")
+                                                 : "image://theme/icon-m-toolbar-mediacontrol-play" + (theme.inverted ? "-white" : "")
                 opacity: play.pressed ? 0.4 : 1.0
 
                 MouseArea {
@@ -338,7 +338,7 @@ Column {
             Image {
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                source: "image://theme/icon-m-toolbar-mediacontrol-next-white"
+                source: "image://theme/icon-m-toolbar-mediacontrol-next" + (theme.inverted ? "-white" : "")
                 opacity: next.pressed ? 0.4 : 1.0
 
                 MouseArea {
@@ -365,7 +365,7 @@ Column {
                 valueIndicatorMargin : 40
                 enabled: spotifySession.currentTrack ? true : false
                 platformStyle: SliderStyle {
-                    grooveItemElapsedBackground: "qrc:/qml/images/meegotouch-slider-elapsed-background-horizontal.png"
+                    grooveItemElapsedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-slider-elapsed-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
                     handleBackground: "qrc:/qml/images/meegotouch-slider-handle-background-horizontal.png"
                     handleBackgroundPressed: "qrc:/qml/images/meegotouch-slider-handle-background-pressed-horizontal.png"
                     mouseMarginBottom: -25
@@ -401,7 +401,7 @@ Column {
                     id: trackPos
                     font.family: UI.FONT_FAMILY
                     font.pixelSize: UI.FONT_LSMALL
-                    color: UI.LIST_SUBTITLE_COLOR_INVERTED
+                    color: theme.inverted ? UI.LIST_SUBTITLE_COLOR_INVERTED : UI.LIST_SUBTITLE_COLOR
                     anchors.left: parent.left
                     anchors.leftMargin: 5
                     anchors.top: parent.top
@@ -411,7 +411,7 @@ Column {
                 Label {
                     font.family: UI.FONT_FAMILY
                     font.pixelSize: UI.FONT_LSMALL
-                    color: UI.LIST_SUBTITLE_COLOR_INVERTED
+                    color: theme.inverted ? UI.LIST_SUBTITLE_COLOR_INVERTED : UI.LIST_SUBTITLE_COLOR
                     anchors.right: parent.right
                     anchors.rightMargin: 5
                     anchors.top: parent.top
@@ -429,7 +429,7 @@ Column {
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
                 opacity: enabled ? (addArea.pressed ? 0.4 : 1.0) : 0.2
-                source: "image://theme/icon-m-toolbar-add-white";
+                source: "image://theme/icon-m-toolbar-add" + (theme.inverted ? "-white" : "");
                 enabled: !spotifySession.offlineMode
 
                 MouseArea {
@@ -448,9 +448,9 @@ Column {
                 x: 136
                 anchors.verticalCenter: parent.verticalCenter
                 opacity: enabled ? (starArea.pressed ? 0.4 : 1.0) : 0.2
-                source: spotifySession.currentTrack ? (spotifySession.currentTrack.isStarred ? "image://theme/icon-m-toolbar-favorite-mark-white"
-                                                                                           : "image://theme/icon-m-toolbar-favorite-unmark-white")
-                                                    : "image://theme/icon-m-toolbar-favorite-unmark-white";
+                source: spotifySession.currentTrack ? (spotifySession.currentTrack.isStarred ? ("image://theme/icon-m-toolbar-favorite-mark" + (theme.inverted ? "-white" : ""))
+                                                                                             : ("image://theme/icon-m-toolbar-favorite-unmark" + (theme.inverted ? "-white" : "")))
+                                                    : ("image://theme/icon-m-toolbar-favorite-unmark" + (theme.inverted ? "-white" : ""));
                 enabled: !spotifySession.offlineMode
 
                 MouseArea {
@@ -463,7 +463,7 @@ Column {
             Image {
                 x: 272
                 anchors.verticalCenter: parent.verticalCenter
-                source: spotifySession.shuffle ? "images/icon-m-toolbar-shuffle-white-selected.png" : "image://theme/icon-m-toolbar-shuffle-white";
+                source: spotifySession.shuffle ? ("images/icon-m-toolbar-shuffle" + (theme.inverted ? "-white" : "") + "-selected.png") : ("image://theme/icon-m-toolbar-shuffle" + (theme.inverted ? "-white" : ""));
                 opacity: shuffleArea.pressed ? 0.4 : 1.0
                 MouseArea {
                     id: shuffleArea
@@ -475,7 +475,7 @@ Column {
             Image {
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                source: spotifySession.repeat ? "images/icon-m-toolbar-repeat-white-selected.png" : "image://theme/icon-m-toolbar-repeat-white";
+                source: spotifySession.repeat ? "images/icon-m-toolbar-repeat-white-selected.png" : ("image://theme/icon-m-toolbar-repeat" + (theme.inverted ? "-white" : ""));
                 opacity: repeatArea.pressed ? 0.4 : 1.0
                 MouseArea {
                     id: repeatArea
diff --git a/qml/InboxTrackDelegate.qml b/qml/InboxTrackDelegate.qml
index c28ac99..d6ce737 100644
--- a/qml/InboxTrackDelegate.qml
+++ b/qml/InboxTrackDelegate.qml
@@ -85,10 +85,10 @@ Item {
         PauseAnimation { duration: 200 }
         ParallelAnimation {
             NumberAnimation { target: background; property: "opacity"; to: 0.4; duration: 300 }
-            ColorAnimation { target: mainText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: subText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: thirdText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: timing; property: "color"; to: "black"; duration: 300 }
+            ColorAnimation { target: mainText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: subText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: thirdText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: timing; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
             ColorAnimation { target: seenMarker; property: "color"; to: "black"; duration: 300 }
             NumberAnimation { target: iconItem; property: "opacity"; to: 0.2; duration: 300 }
         }
@@ -106,6 +106,16 @@ Item {
         }
     }
 
+    Connections {
+        target: theme
+        onInvertedChanged: {
+            mainText.color = highlighted ? listItem.highlightColor : listItem.titleColor
+            subText.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+            thirdText.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+            timing.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+        }
+    }
+
     onHighlightedChanged: {
         mainText.color = highlighted ? listItem.highlightColor : listItem.titleColor
         subText.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
@@ -120,7 +130,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : backgroundOpacity
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Rectangle {
@@ -166,7 +176,7 @@ Item {
                 width: 34; height: width
                 smooth: true
                 visible: listItem.starred
-                source: "image://theme/icon-m-toolbar-favorite-mark-white"
+                source: "image://theme/icon-m-toolbar-favorite-mark" + (theme.inverted ? "-white" : "")
             }
         }
 
diff --git a/qml/LastfmLoginSheet.qml b/qml/LastfmLoginSheet.qml
index 21e50c7..ed9ea5b 100644
--- a/qml/LastfmLoginSheet.qml
+++ b/qml/LastfmLoginSheet.qml
@@ -51,7 +51,7 @@ MySheet {
     acceptButtonText: "Log in"
     rejectButtonText: "Cancel"
     platformStyle: SheetStyle {
-        headerBackground: "images/meegotouch-sheet-header-inverted-background.png"
+        headerBackground: theme.inverted ? "images/meegotouch-sheet-header-inverted-background.png" : "image://theme/meegotouch-sheet-header-background"
     }
 
     content: Column {
@@ -74,7 +74,10 @@ MySheet {
         TextField {
             id: username
             placeholderText: "Username"
-            width: parent.width
+            anchors.left: parent.left
+            anchors.leftMargin: UI.MARGIN_XLARGE
+            anchors.right: parent.right
+            anchors.rightMargin: UI.MARGIN_XLARGE
             platformStyle: TextFieldStyle {
                 backgroundSelected: "image://theme/" + appWindow.themeColor + "-meegotouch-textedit-background-selected"
             }
@@ -101,7 +104,10 @@ MySheet {
             id: password
             placeholderText: "Password"
             echoMode: TextInput.Password
-            width: parent.width
+            anchors.left: parent.left
+            anchors.leftMargin: UI.MARGIN_XLARGE
+            anchors.right: parent.right
+            anchors.rightMargin: UI.MARGIN_XLARGE
             platformStyle: TextFieldStyle {
                 backgroundSelected: "image://theme/" + appWindow.themeColor + "-meegotouch-textedit-background-selected"
             }
diff --git a/qml/LoginPage.qml b/qml/LoginPage.qml
index 6a723ef..7389d16 100644
--- a/qml/LoginPage.qml
+++ b/qml/LoginPage.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -127,9 +127,9 @@ Page {
                 id: termsCheck
                 anchors.verticalCenter: parent.verticalCenter
                 platformStyle: CheckBoxStyle {
-                    backgroundSelected: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-inverted-background-selected"
-                    backgroundPressed: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-inverted-background-pressed"
-                    backgroundDisabled: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-inverted-background-disabled"
+                    backgroundSelected: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-" + (theme.inverted ? "inverted-" : "") + "background-selected"
+                    backgroundPressed: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
+                    backgroundDisabled: "image://theme/" + appWindow.themeColor + "-meegotouch-button-checkbox-" + (theme.inverted ? "inverted-" : "") + "background-disabled"
                 }
             }
             Label {
@@ -152,10 +152,10 @@ Page {
             id: button
             text: "Log in"
             platformStyle: ButtonStyle {
-                 pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-pressed" + (position ? "-" + position : "")
-                 disabledBackground: "image://theme/" + (position ? appWindow.themeColor + "-" : "") + "meegotouch-button-inverted-background-disabled" + (position ? "-" + position : "")
-                 checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-selected" + (position ? "-" + position : "")
-                 checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-disabled-selected" + (position ? "-" + position : "")
+                 pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-pressed" + (position ? "-" + position : "")
+                 disabledBackground: "image://theme/" + (position ? appWindow.themeColor + "-" : "") + "meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled" + (position ? "-" + position : "")
+                 checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-selected" + (position ? "-" + position : "")
+                 checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled-selected" + (position ? "-" + position : "")
             }
 
             anchors.left: parent.left
diff --git a/qml/MainPage.qml b/qml/MainPage.qml
index 1fb0fb0..5df85e0 100644
--- a/qml/MainPage.qml
+++ b/qml/MainPage.qml
@@ -177,7 +177,7 @@ Page {
             TabButton {
                 tab: playlistsTab
                 iconSource: theme.inverted ? "image://theme/icon-m-toolbar-list-white"
-                                          : "image://theme/icon-m-toolbar-list"
+                                           : "image://theme/icon-m-toolbar-list"
 
                 property bool isCurrentTab: false
 
diff --git a/qml/MyMenu.qml b/qml/MyMenu.qml
index 27b338d..00b17f4 100644
--- a/qml/MyMenu.qml
+++ b/qml/MyMenu.qml
@@ -195,7 +195,7 @@ MyPopup {
 
         BorderImage {
            id: backgroundImage
-           source: "images/meegotouch-menu-background-inverted.png"
+           source: theme.inverted ? "images/meegotouch-menu-background-inverted.png" : "image://theme/meegotouch-menu-background"
            anchors.fill : parent
            border { left: 22; top: 22;
                     right: 22; bottom: 22 }
diff --git a/qml/MyMenuItemStyle.qml b/qml/MyMenuItemStyle.qml
index 2fd1539..6cfe161 100644
--- a/qml/MyMenuItemStyle.qml
+++ b/qml/MyMenuItemStyle.qml
@@ -65,8 +65,8 @@ Style {
 
     property string position: ""
 
-    property url background: "images/meegotouch-list-inverted-background" + (position ? "-" + position : "") + ".png"
-    property url pressedBackground: "images/meegotouch-list-inverted-background-pressed" + (position ? "-" + position : "") + ".png"
+    property url background: theme.inverted ? ("images/meegotouch-list-inverted-background" + (position ? "-" + position : "") + ".png") : ("image://theme/meegotouch-list-background" + (position ? "-" + position : ""))
+    property url pressedBackground: theme.inverted ? ("images/meegotouch-list-inverted-background-pressed" + (position ? "-" + position : "") + ".png") : ("image://theme/meegotouch-list-background-pressed" + (position ? "-" + position : ""))
 //    TODO: Add disabled state once the graphics are available
 //    property url disabledBackground: "image://theme/meegotouch-list" + __invertedString + "-background-disabled" + (position ? "-" + position : "")
 }
diff --git a/qml/MySheet.qml b/qml/MySheet.qml
index 72e3df4..3233e09 100644
--- a/qml/MySheet.qml
+++ b/qml/MySheet.qml
@@ -213,9 +213,9 @@ Item {
                     anchors.rightMargin: root.platformStyle.acceptButtonRightMargin
                     anchors.verticalCenter: parent.verticalCenter
                     platformStyle: SheetButtonAccentStyle {
-                        background: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-inverted-background"
-                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-inverted-background-pressed"
-                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-inverted-background-disabled"
+                        background: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-" + (theme.inverted ? "inverted-" : "") + "background"
+                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
+                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-sheet-button-accent-" + (theme.inverted ? "inverted-" : "") + "background-disabled"
                     }
                     visible: text != ""
                     onClicked: close()
diff --git a/qml/Player.qml b/qml/Player.qml
index f700536..416f47b 100644
--- a/qml/Player.qml
+++ b/qml/Player.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -41,12 +41,13 @@
 
 import QtQuick 1.1
 import com.nokia.meego 1.0
+import "UIConstants.js" as UI
 
 Rectangle {
     id: player
     width: parent.width
     height: screen.currentOrientation == Screen.Portrait ? 818 : 444
-    color: "black"
+    color: theme.inverted ? UI.COLOR_INVERTED_BACKGROUND : UI.COLOR_BACKGROUND
     y: -height
 
     property bool openRequested: false
diff --git a/qml/PlaylistDelegate.qml b/qml/PlaylistDelegate.qml
index 69123bb..65018fe 100644
--- a/qml/PlaylistDelegate.qml
+++ b/qml/PlaylistDelegate.qml
@@ -79,10 +79,10 @@ Item {
         PauseAnimation { duration: 200 }
         ParallelAnimation {
             NumberAnimation { target: background; property: "opacity"; to: 0.4; duration: 300 }
-            ColorAnimation { target: mainText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: subText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: timing; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: waitingText; property: "color"; to: "black"; duration: 300 }
+            ColorAnimation { target: mainText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: subText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: timing; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: waitingText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
             NumberAnimation { target: iconItem; property: "opacity"; to: 0.2; duration: 300 }
             NumberAnimation { target: unseenBox; property: "opacity"; to: 0.2; duration: 300 }
             NumberAnimation { target: offlineStatusIcon; property: "opacity"; to: 0.2; duration: 300 }
@@ -104,6 +104,16 @@ Item {
         }
     }
 
+    Connections {
+        target: theme
+        onInvertedChanged: {
+            mainText.color = listItem.titleColor
+            subText.color = listItem.subtitleColor
+            timing.color = listItem.subtitleColor
+            waitingText.color = listItem.subtitleColor
+        }
+    }
+
     Rectangle {
         id: background
         anchors.fill: parent
@@ -111,7 +121,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : 0.0
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Row {
@@ -174,8 +184,7 @@ Item {
                             anchors.centerIn: parent
                             font.family: listItem.titleFont
                             font.pixelSize: listItem.subtitleSize
-                            font.bold: true
-                            color: listItem.titleColor
+                            color: UI.LIST_TITLE_COLOR_INVERTED
                             horizontalAlignment: Text.AlignHCenter
                             verticalAlignment: Text.AlignVCenter
                             text: listItem.unseens
diff --git a/qml/PlaylistNameSheet.qml b/qml/PlaylistNameSheet.qml
index b862aeb..0b16d5b 100644
--- a/qml/PlaylistNameSheet.qml
+++ b/qml/PlaylistNameSheet.qml
@@ -52,7 +52,7 @@ MySheet {
     acceptButtonText: "Save"
     rejectButtonText: "Cancel"
     platformStyle: SheetStyle {
-        headerBackground: "images/meegotouch-sheet-header-inverted-background.png"
+        headerBackground: theme.inverted ? "images/meegotouch-sheet-header-inverted-background.png" : "image://theme/meegotouch-sheet-header-background"
     }
 
     content: Column {
@@ -74,7 +74,10 @@ MySheet {
 
         TextField {
             id: field
-            width: parent.width
+            anchors.left: parent.left
+            anchors.leftMargin: UI.MARGIN_XLARGE
+            anchors.right: parent.right
+            anchors.rightMargin: UI.MARGIN_XLARGE
             inputMethodHints: Qt.ImhNoPredictiveText
             platformStyle: TextFieldStyle {
                 backgroundSelected: "image://theme/" + appWindow.themeColor + "-meegotouch-textedit-background-selected"
diff --git a/qml/PlaylistPage.qml b/qml/PlaylistPage.qml
index 23a11bd..6804b3e 100644
--- a/qml/PlaylistPage.qml
+++ b/qml/PlaylistPage.qml
@@ -83,6 +83,7 @@ Page {
         Component.onCompleted: positionViewAtBeginning()
 
         delegate: PlaylistDelegate {
+            id: playlistDelegate
             title: !modelData.isLoaded ? "Loading..." : (modelData.type === SpotifyPlaylist.Playlist || modelData.type === SpotifyPlaylist.Folder ? modelData.name
                                                                                                                                                  : (modelData.type === SpotifyPlaylist.Starred ? "Starred"
                                                                                                                                                                                                : "Inbox"))
@@ -123,16 +124,24 @@ Page {
             onPressAndHold: { menu.playlist = modelData; menu.open(); }
 
             property string staticIcon
-            Component.onCompleted: {
+
+            function updateIcon() {
                 if (modelData.type === SpotifyPlaylist.Playlist)
-                    staticIcon = "image://theme/icon-m-music-video-all-songs";
+                    staticIcon = theme.inverted ? "image://theme/icon-m-music-video-all-songs" : "images/icon-m-music-video-all-songs-black.png";
                 else if (modelData.type === SpotifyPlaylist.Starred)
-                    staticIcon = "image://theme/icon-m-common-favorite-mark-inverse";
+                    staticIcon = "image://theme/icon-m-common-favorite-mark" + (theme.inverted ? "-inverse" : "");
                 else if (modelData.type === SpotifyPlaylist.Inbox)
-                    staticIcon = "image://theme/icon-m-toolbar-directory-move-to-white-selected";
+                    staticIcon = theme.inverted ? "image://theme/icon-m-toolbar-directory-move-to-white-selected" : "images/icon-m-toolbar-directory-move-to-black.png";
                 else if (modelData.type === SpotifyPlaylist.Folder)
-                    staticIcon = "image://theme/icon-m-toolbar-directory-selected"
+                    staticIcon = theme.inverted ? "image://theme/icon-m-toolbar-directory-selected" : "images/icon-m-toolbar-directory-black.png"
+            }
+
+            Connections {
+                target: theme
+                onInvertedChanged: playlistDelegate.updateIcon()
             }
+
+            Component.onCompleted: updateIcon()
         }
 
         header: ViewHeader {
@@ -158,7 +167,7 @@ Page {
                 anchors.leftMargin: -UI.MARGIN_XLARGE
                 anchors.rightMargin: -UI.MARGIN_XLARGE
                 opacity: mouseArea.pressed ? 1.0 : 0.0
-                color: "#22FFFFFF"
+                color: theme.inverted ? "#22FFFFFF" : "#15000000"
             }
 
             Row {
diff --git a/qml/QuickControls.qml b/qml/QuickControls.qml
index 659c60a..9063f35 100644
--- a/qml/QuickControls.qml
+++ b/qml/QuickControls.qml
@@ -5,22 +5,22 @@
 ** Contact: Yoann Lopes (yoann.lopes@nokia.com)
 **
 ** This file is part of the MeeSpot project.
-** 
+**
 ** Redistribution and use in source and binary forms, with or without
 ** modification, are permitted provided that the following conditions
 ** are met:
-** 
+**
 ** Redistributions of source code must retain the above copyright notice,
 ** this list of conditions and the following disclaimer.
-** 
+**
 ** Redistributions in binary form must reproduce the above copyright
 ** notice, this list of conditions and the following disclaimer in the
 ** documentation and/or other materials provided with the distribution.
-** 
+**
 ** Neither the name of Nokia Corporation and its Subsidiary(-ies) nor the names of its
 ** contributors may be used to endorse or promote products derived from
 ** this software without specific prior written permission.
-** 
+**
 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
@@ -43,10 +43,11 @@ import QtQuick 1.1
 import com.nokia.meego 1.0
 import "UIConstants.js" as UI
 
-Item {
+Rectangle {
     id: smallPlayer
     width: parent.width
     height: screen.currentOrientation == Screen.Portrait ? UI.HEADER_DEFAULT_HEIGHT_PORTRAIT : UI.HEADER_DEFAULT_HEIGHT_LANDSCAPE
+    color: "black"
 
     MouseArea {
         id: opener
diff --git a/qml/Scrollbar.qml b/qml/Scrollbar.qml
index 3671b79..4462392 100644
--- a/qml/Scrollbar.qml
+++ b/qml/Scrollbar.qml
@@ -57,13 +57,13 @@ Item {
     Image {
         id: fastscrollbar
         anchors.fill: parent
-        source: "image://theme/meegotouch-fast-scroll-rail-inverted"
+        source: "image://theme/meegotouch-fast-scroll-rail" + (theme.inverted ? "-inverted" : "")
         opacity: 0
         visible: listView.count >= 25
 
         Image {
             anchors.horizontalCenter: parent.horizontalCenter
-            source: "image://theme/meegotouch-fast-scroll-handle-inverted"
+            source: "image://theme/meegotouch-fast-scroll-handle" + (theme.inverted ? "-inverted" : "")
             y: Math.max(0, Math.min(parent.height - height, (listView.contentY / (listView.contentHeight - listView.height / 2)) * parent.height))
         }
 
diff --git a/qml/SearchPage.qml b/qml/SearchPage.qml
index def2dbf..cb8586c 100644
--- a/qml/SearchPage.qml
+++ b/qml/SearchPage.qml
@@ -67,7 +67,9 @@ Page {
     Rectangle {
         anchors.fill: parent
         visible: spotifySession.offlineMode
-        color: "#DD000000"
+        anchors.rightMargin: -UI.MARGIN_XLARGE
+        anchors.leftMargin: -UI.MARGIN_XLARGE
+        color: theme.inverted ? "#DD000000" : "#DDFFFFFF"
         z: 500
 
         Label {
diff --git a/qml/Selector.qml b/qml/Selector.qml
index 060c744..531dbfb 100644
--- a/qml/Selector.qml
+++ b/qml/Selector.qml
@@ -71,7 +71,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : 0.0
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
         Behavior on opacity { NumberAnimation { duration: 50 } }
     }
 
diff --git a/qml/SettingsPage.qml b/qml/SettingsPage.qml
index dcd0e2d..a461387 100644
--- a/qml/SettingsPage.qml
+++ b/qml/SettingsPage.qml
@@ -89,7 +89,7 @@ Page {
                         Switch {
                             id: offlineSwitch
                             platformStyle: SwitchStyle {
-                                 switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on-inverted"
+                                 switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on" + (theme.inverted ? "-inverted" : "")
                             }
                             anchors.right: parent.right
                             anchors.verticalCenter: parent.verticalCenter
@@ -160,7 +160,7 @@ Page {
 
                     Switch {
                         platformStyle: SwitchStyle {
-                            switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on-inverted"
+                            switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on" + (theme.inverted ? "-inverted" : "")
                         }
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
@@ -195,7 +195,7 @@ Page {
                         anchors.leftMargin: -UI.MARGIN_XLARGE
                         anchors.rightMargin: -UI.MARGIN_XLARGE
                         opacity: lastfmMouseArea.pressed ? 1.0 : 0.0
-                        color: "#22FFFFFF"
+                        color: theme.inverted ? "#22FFFFFF" : "#15000000"
                         Behavior on opacity { NumberAnimation { duration: 50 } }
                     }
 
@@ -238,7 +238,7 @@ Page {
                     Switch {
                         id: lastfmSwitch
                         platformStyle: SwitchStyle {
-                            switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on-inverted"
+                            switchOn: "image://theme/" + appWindow.themeColor + "-meegotouch-switch-on" + (theme.inverted ? "-inverted" : "")
                         }
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
@@ -270,6 +270,29 @@ Page {
                     }
                 }
 
+                Selector {
+                    title: "Theme"
+                    model: ListModel {
+                        ListElement { name: "Dark"; value: true }
+                        ListElement { name: "Light"; value: false }
+                    }
+                    selectedIndex: theme.inverted ? 0 : 1
+                    onSelectedIndexChanged: {
+                        theme.inverted = model.get(selectedIndex).value
+                        spotifySession.invertedTheme = theme.inverted;
+                    }
+                }
+
+                Item {
+                    width: parent.width
+                    height: UI.MARGIN_XLARGE * 2
+
+                    Separator {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: parent.width
+                    }
+                }
+
                 Item {
                     width: parent.width
                     height: UI.MARGIN_XLARGE
@@ -279,10 +302,10 @@ Page {
                     id: buttonAbout
                     text: "About"
                     platformStyle: ButtonStyle {
-                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-pressed" + (position ? "-" + position : "")
-                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-disabled" + (position ? "-" + position : "")
-                        checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-selected" + (position ? "-" + position : "")
-                        checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-disabled-selected" + (position ? "-" + position : "")
+                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-pressed" + (position ? "-" + position : "")
+                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled" + (position ? "-" + position : "")
+                        checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-selected" + (position ? "-" + position : "")
+                        checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled-selected" + (position ? "-" + position : "")
                     }
                     anchors.left: parent.left
                     anchors.right: parent.right
@@ -302,10 +325,10 @@ Page {
                 Button {
                     id: button
                     platformStyle: ButtonStyle {
-                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-pressed" + (position ? "-" + position : "")
-                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-disabled" + (position ? "-" + position : "")
-                        checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-selected" + (position ? "-" + position : "")
-                        checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-inverted-background-disabled-selected" + (position ? "-" + position : "")
+                        pressedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-pressed" + (position ? "-" + position : "")
+                        disabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled" + (position ? "-" + position : "")
+                        checkedBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-selected" + (position ? "-" + position : "")
+                        checkedDisabledBackground: "image://theme/" + appWindow.themeColor + "-meegotouch-button-" + (theme.inverted ? "inverted-" : "") + "background-disabled-selected" + (position ? "-" + position : "")
                     }
                     text: "Log out " + (spotifySession.user ? spotifySession.user.canonicalName : "")
                     anchors.left: parent.left
diff --git a/qml/ToplistPage.qml b/qml/ToplistPage.qml
index 5d10f56..e4424a5 100644
--- a/qml/ToplistPage.qml
+++ b/qml/ToplistPage.qml
@@ -71,7 +71,9 @@ Page {
     Rectangle {
         anchors.fill: parent
         visible: spotifySession.offlineMode
-        color: "#DD000000"
+        anchors.rightMargin: -UI.MARGIN_XLARGE
+        anchors.leftMargin: -UI.MARGIN_XLARGE
+        color: theme.inverted ? "#DD000000" : "#DDFFFFFF"
         z: 500
 
         Label {
@@ -145,7 +147,7 @@ Page {
                     anchors.bottom: parent.bottom
                     width: parent.width
                     height: newAlbumName.height + 2
-                    color: "#BA202020"
+                    color: theme.inverted ? "#BA202020" : "#BAD7D7D7"
 
                     Column {
                         id: newAlbumName
diff --git a/qml/TrackDelegate.qml b/qml/TrackDelegate.qml
index 3eaef7f..4f50221 100644
--- a/qml/TrackDelegate.qml
+++ b/qml/TrackDelegate.qml
@@ -85,9 +85,9 @@ Item {
         PauseAnimation { duration: 200 }
         ParallelAnimation {
             NumberAnimation { target: background; property: "opacity"; to: 0.4; duration: 300 }
-            ColorAnimation { target: mainText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: subText; property: "color"; to: "black"; duration: 300 }
-            ColorAnimation { target: timing; property: "color"; to: "black"; duration: 300 }
+            ColorAnimation { target: mainText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: subText; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
+            ColorAnimation { target: timing; property: "color"; to: theme.inverted ? "black" : "#DDDDDD"; duration: 300 }
             NumberAnimation { target: iconItem; property: "opacity"; to: 0.2; duration: 300 }
             NumberAnimation { target: coverContainer; property: "opacity"; to: 0.2; duration: 300 }
         }
@@ -110,6 +110,15 @@ Item {
         timing.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
     }
 
+    Connections {
+        target: theme
+        onInvertedChanged: {
+            mainText.color = highlighted ? listItem.highlightColor : listItem.titleColor
+            subText.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+            timing.color = highlighted ? listItem.highlightColor : listItem.subtitleColor
+        }
+    }
+
     Rectangle {
         id: background
         anchors.fill: parent
@@ -117,7 +126,7 @@ Item {
         anchors.leftMargin: -UI.MARGIN_XLARGE
         anchors.rightMargin: -UI.MARGIN_XLARGE
         opacity: mouseArea.pressed ? 1.0 : backgroundOpacity
-        color: "#22FFFFFF"
+        color: theme.inverted ? "#22FFFFFF" : "#15000000"
     }
 
     Loader {
@@ -150,7 +159,7 @@ Item {
     Component {
         id: coverContainerComponent
         Rectangle {
-            color: "#202020"
+            color: theme.inverted ? "#202020" : "#C9C9C9"
             opacity: listItem.available ? 1.0 : 0.2
 
             SpotifyImage {
@@ -194,7 +203,7 @@ Item {
                 width: 34; height: width
                 smooth: true
                 visible: listItem.starred
-                source: "image://theme/icon-m-toolbar-favorite-mark-white"
+                source: "image://theme/icon-m-toolbar-favorite-mark" + (theme.inverted ? "-white" : "")
             }
         }
 
diff --git a/qml/TracklistPage.qml b/qml/TracklistPage.qml
index 160395c..706792d 100644
--- a/qml/TracklistPage.qml
+++ b/qml/TracklistPage.qml
@@ -162,7 +162,7 @@ Page {
         anchors.top: parent.top
         width: parent.width
         height: 0
-        color: "black"
+        color: theme.inverted ? UI.COLOR_INVERTED_BACKGROUND : UI.COLOR_BACKGROUND
         clip: true
 
         Column {
diff --git a/qml/UIConstants.js b/qml/UIConstants.js
index 553fdcf..113d886 100644
--- a/qml/UIConstants.js
+++ b/qml/UIConstants.js
@@ -131,7 +131,7 @@ var LIST_ITEM_SPACING = 16
 var LIST_ITEM_HEIGHT = 80
 var LIST_ICON_SIZE = 64
 var LIST_TILE_SIZE = 26
-var LIST_TITLE_COLOR = "#282828"
+var LIST_TITLE_COLOR = "#191919"
 var LIST_TITLE_COLOR_INVERTED = "#ffffff"
 var LIST_SUBTILE_SIZE = 22
 var LIST_SUBTITLE_COLOR = "#505050"
diff --git a/qml/images/icon-l-contact-avatar-placeholder-big.png b/qml/images/icon-l-contact-avatar-placeholder-big.png
new file mode 100644
index 0000000..c77f114
--- /dev/null
+++ b/qml/images/icon-l-contact-avatar-placeholder-big.png
diff --git a/qml/images/icon-l-contact-avatar-placeholder-black-big.png b/qml/images/icon-l-contact-avatar-placeholder-black-big.png
new file mode 100644
index 0000000..a7c8940
--- /dev/null
+++ b/qml/images/icon-l-contact-avatar-placeholder-black-big.png
diff --git a/qml/images/icon-l-contact-avatar-placeholder-black.png b/qml/images/icon-l-contact-avatar-placeholder-black.png
new file mode 100644
index 0000000..f57c8e8
--- /dev/null
+++ b/qml/images/icon-l-contact-avatar-placeholder-black.png
diff --git a/qml/images/icon-l-contact-avatar-placeholder.png b/qml/images/icon-l-contact-avatar-placeholder.png
new file mode 100644
index 0000000..956067b
--- /dev/null
+++ b/qml/images/icon-l-contact-avatar-placeholder.png
diff --git a/qml/images/icon-m-common-green.png b/qml/images/icon-m-common-green.png
index 97a2a78..5bcc5f2 100644
--- a/qml/images/icon-m-common-green.png
+++ b/qml/images/icon-m-common-green.png
diff --git a/qml/images/icon-m-music-video-all-songs-black.png b/qml/images/icon-m-music-video-all-songs-black.png
new file mode 100644
index 0000000..a27b4fd
--- /dev/null
+++ b/qml/images/icon-m-music-video-all-songs-black.png
diff --git a/qml/images/icon-m-toolbar-directory-black.png b/qml/images/icon-m-toolbar-directory-black.png
new file mode 100644
index 0000000..1b9bb4e
--- /dev/null
+++ b/qml/images/icon-m-toolbar-directory-black.png
diff --git a/qml/images/icon-m-toolbar-directory-move-to-black.png b/qml/images/icon-m-toolbar-directory-move-to-black.png
new file mode 100644
index 0000000..539e543
--- /dev/null
+++ b/qml/images/icon-m-toolbar-directory-move-to-black.png
diff --git a/qml/images/icon-m-toolbar-shuffle-selected.png b/qml/images/icon-m-toolbar-shuffle-selected.png
new file mode 100644
index 0000000..08cdc08
--- /dev/null
+++ b/qml/images/icon-m-toolbar-shuffle-selected.png
diff --git a/qml/images/meegotouch-list-inverted-background.png b/qml/images/meegotouch-list-inverted-background.png
index 43ea2db..cdc663e 100644
--- a/qml/images/meegotouch-list-inverted-background.png
+++ b/qml/images/meegotouch-list-inverted-background.png
diff --git a/qml/images/meegotouch-slider-elapsed-background-horizontal.png b/qml/images/meegotouch-slider-elapsed-background-horizontal.png
deleted file mode 100644
index e1c5e76..0000000
--- a/qml/images/meegotouch-slider-elapsed-background-horizontal.png
+++ /dev/null
diff --git a/qml/images/meegotouch-slider-handle-background-horizontal.png b/qml/images/meegotouch-slider-handle-background-horizontal.png
index 589a227..e6b4620 100644
--- a/qml/images/meegotouch-slider-handle-background-horizontal.png
+++ b/qml/images/meegotouch-slider-handle-background-horizontal.png
diff --git a/qml/images/meegotouch-slider-handle-background-pressed-horizontal.png b/qml/images/meegotouch-slider-handle-background-pressed-horizontal.png
index ddd37d3..d8901bc 100644
--- a/qml/images/meegotouch-slider-handle-background-pressed-horizontal.png
+++ b/qml/images/meegotouch-slider-handle-background-pressed-horizontal.png
diff --git a/qml/images/player-quickcontrols-back-closed.png b/qml/images/player-quickcontrols-back-closed.png
index 2ad1af8..c8b1b0b 100644
--- a/qml/images/player-quickcontrols-back-closed.png
+++ b/qml/images/player-quickcontrols-back-closed.png
diff --git a/qml/images/player-quickcontrols-back-open.png b/qml/images/player-quickcontrols-back-open.png
index 7db7cb6..e748e3d 100644
--- a/qml/images/player-quickcontrols-back-open.png
+++ b/qml/images/player-quickcontrols-back-open.png
diff --git a/qml/main.qml b/qml/main.qml
index fc6bbc1..60398fe 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -68,7 +68,7 @@ PageStackWindow {
     }
 
     Component.onCompleted: {
-        theme.inverted = true;
+        theme.inverted = spotifySession.invertedTheme;
         themeColor = "color2"
         if (!spotifySession.isOnline && (!spotifySession.user || !spotifySession.offlineMode))
             openConnection();