diff --git a/nymea-app/ui/StyleBase.qml b/nymea-app/ui/StyleBase.qml
index a6d11e11..0c057361 100644
--- a/nymea-app/ui/StyleBase.qml
+++ b/nymea-app/ui/StyleBase.qml
@@ -4,6 +4,9 @@ Item {
     property color backgroundColor: "#fafafa"
     property color foregroundColor: "#202020"
 
+    property color accentColor: "#ff57baae"
+    property color iconColor: "#808080"
+
     property color headerBackgroundColor: "#ffffff"
     property color headerForegroundColor: "#202020"
 
@@ -11,11 +14,9 @@ Item {
     property color tileForegroundColor: foregroundColor
     property color tileOverlayColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.1))
     property color tileOverlayForegroundColor: foregroundColor
+    property color tileOverlayIconColor: iconColor
     property int tileRadius: 6
 
-    property color accentColor: "#ff57baae"
-
-    property color iconColor: "#808080"
 
     // Note: Font files need to be provided in a "fonts" folder in the style
     property string fontFamily: "Ubuntu"
diff --git a/nymea-app/ui/components/MediaControls.qml b/nymea-app/ui/components/MediaControls.qml
index fa7daf22..9ffed03f 100644
--- a/nymea-app/ui/components/MediaControls.qml
+++ b/nymea-app/ui/components/MediaControls.qml
@@ -40,12 +40,15 @@ RowLayout {
 
     property Thing thing: null
 
+    property color iconColor: Style.iconColor
+
     property bool showExtendedControls: false
 
     readonly property State playbackState: thing.stateByName("playbackStatus")
     readonly property State shuffleState: thing.stateByName("shuffle")
     readonly property State repeatState: thing.stateByName("repeat")
 
+
     function executeAction(actionName, params) {
         if (params === undefined) {
             params = []
@@ -62,6 +65,7 @@ RowLayout {
         enabled: root.shuffleState !== null
         opacity: enabled ? 1 : .5
         visible: root.showExtendedControls
+        color: root.shuffleState.value === false ? root.iconColor : Style.accentColor
         onClicked: {
             var params = []
             var param = {}
@@ -81,6 +85,7 @@ RowLayout {
         longpressEnabled: root.thing.thingClass.actionTypes.findByName("fastRewind") !== null
         enabled: root.playbackState && root.playbackState.value !== "Stopped"
         opacity: enabled ? 1 : .5
+        color: root.iconColor
 
         repeat: true
         onClicked: {
@@ -97,6 +102,7 @@ RowLayout {
         imageSource: root.playbackState && root.playbackState.value === "Playing" ? "../images/media-playback-pause.svg" : "../images/media-playback-start.svg"
         longpressImageSource: "../images/media-playback-stop.svg"
         longpressEnabled: root.playbackState && root.playbackState.value !== "Stopped"
+        color: root.iconColor
 
         onClicked: {
             if (root.playbackState.value === "Playing") {
@@ -120,6 +126,7 @@ RowLayout {
         enabled: root.playbackState && root.playbackState.value !== "Stopped"
         opacity: enabled ? 1 : .5
         repeat: true
+        color: root.iconColor
         onClicked: {
             root.executeAction("skipNext")
         }
@@ -133,7 +140,7 @@ RowLayout {
         Layout.preferredHeight: app.iconSize
         Layout.preferredWidth: height
         imageSource: root.repeatState.value === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg"
-        color: root.repeatState.value === "None" ? Style.iconColor : Style.accentColor
+        color: root.repeatState.value === "None" ? root.iconColor : Style.accentColor
         longpressEnabled: false
         enabled: root.repeatState !== null
         opacity: enabled ? 1 : .5
diff --git a/nymea-app/ui/delegates/InterfaceTile.qml b/nymea-app/ui/delegates/InterfaceTile.qml
index d7791b5a..7b2c2e6d 100644
--- a/nymea-app/ui/delegates/InterfaceTile.qml
+++ b/nymea-app/ui/delegates/InterfaceTile.qml
@@ -255,6 +255,7 @@ MainPageTile {
 
             MediaControls {
                 thing: inlineMediaControl.currentDevice
+                iconColor: Style.tileOverlayIconColor
             }
         }
     }
@@ -308,6 +309,7 @@ MainPageTile {
             ProgressButton {
                 longpressEnabled: false
                 visible: imageSource.length > 0
+                color: Style.tileOverlayIconColor
                 imageSource: {
                     switch (iface.name) {
                     case "media":
@@ -382,6 +384,7 @@ MainPageTile {
             ProgressButton {
                 longpressEnabled: false
                 visible: imageSource.length > 0
+                color: Style.tileOverlayIconColor
                 imageSource: {
                     switch (iface.name) {
                     case "media":
@@ -454,6 +457,7 @@ MainPageTile {
 
             ProgressButton {
                 longpressEnabled: false
+                color: Style.tileOverlayIconColor
                 imageSource: {
                     switch (iface.name) {
                     case "media":