MediaPlayer: Use theme colors in menu

MediaPlayer demo was using themed text colors but native base colors in
the File menu. This caused issues with visibility if the contrast
between the colors was too low, at least on Gnome.

This patch updates the demo to use themed colors in the File menu, as
well as using the highlight color more appropriately for better
visibility in both dark and light themes.

Additionally, the highlight color is added to the theming singleton.

Pick-to: 6.7
Change-Id: I7baf0ce217e24112c8daabfdeec76e069c867062
Reviewed-by: Artem Dyomin <artem.dyomin@qt.io>
Reviewed-by: Jøger Hansegård <joger.hansegard@qt.io>

examples/demos/mediaplayer/Config/Config.qml

@@ -15,6 +15,7 @@ QtObject {
     readonly property bool isMobileTarget : Qt.platform.os === "android" || Qt.platform.os === "ios"
     readonly property color mainColor : activeTheme ? "#09102B" : "#FFFFFF"
     readonly property color secondaryColor : activeTheme ? "#FFFFFF" : "#09102B"
+    readonly property color highlightColor : "#41CD52"
 
     function iconName(fileName, addSuffix = true) {
         return `${fileName}${activeTheme === Config.Theme.Dark && addSuffix ? "_Dark.svg" : ".svg"}`

examples/demos/mediaplayer/MediaControls/CustomSlider.qml

@@ -3,6 +3,7 @@
 
 import QtQuick
 import QtQuick.Controls.Fusion
+import Config
 
 Slider {
     id: slider
@@ -19,9 +20,9 @@ Slider {
         width: slider.availableWidth
         height: implicitHeight
         radius: 10
-        color: "#41CD52"
+        color: Config.highlightColor
         opacity: 0.2
-        border.color: "#41CD52"
+        border.color: Config.highlightColor
         border.width: 1
     }
 
@@ -38,7 +39,7 @@ Slider {
         x: slider.leftPadding
         y: slider.topPadding + slider.availableHeight / 2 - height / 2
         height: 8
-        color: "#41CD52"
+        color: Config.highlightColor
         radius: 10
     }
 }

examples/demos/mediaplayer/MediaControls/PlaybackRateControl.qml

@@ -4,6 +4,7 @@
 import QtQuick
 import QtQuick.Controls.Fusion
 import QtQuick.Layouts
+import Config
 
 Item {
     id: root
@@ -34,7 +35,7 @@ Item {
 
         Label {
             text: slider.value.toFixed(1) + "x"
-            color: "#41CD52"
+            color: Config.highlightColor
         }
     }
 }

examples/demos/mediaplayer/MediaControls/PlaybackSeekControl.qml

@@ -39,7 +39,7 @@ Item {
 
         CustomSlider {
             id: mediaSlider
-            backgroundColor: !Config.activeTheme ? "white" : "#41CD52"
+            backgroundColor: !Config.activeTheme ? "white" : Config.highlightColor
             backgroundOpacity: !Config.activeTheme ? 0.8 : 0.2
             enabled: root.mediaPlayer.seekable
             to: 1.0

examples/demos/mediaplayer/MediaPlayer/PlayerMenuBar.qml

@@ -42,15 +42,15 @@ Item {
 
         palette.base: Config.mainColor
         palette.text: Config.secondaryColor
-        palette.highlightedText: "#41CD52"
+        palette.highlightedText: Config.highlightColor
         palette.window: "transparent"
         palette.highlight: Config.mainColor
 
         Menu {
             title: qsTr("&File")
+            palette.base: Config.mainColor
             palette.text: Config.secondaryColor
-            palette.window: Config.mainColor
+            palette.highlight: Config.highlightColor
-            palette.highlightedText: "#41CD52"
 
             MenuItem {
                 text: qsTr("Open &File")

examples/demos/mediaplayer/MediaPlayer/PlaylistInfo.qml

@@ -172,7 +172,7 @@ Rectangle {
                     Layout.fillWidth: true
                     elide: Text.ElideRight
                     font.bold: root.currentIndex === row.index
-                    color: root.currentIndex === row.index ? "#41CD52" : Config.secondaryColor
+                    color: root.currentIndex === row.index ? Config.highlightColor : Config.secondaryColor
                     font.pixelSize: 18
                     text: {
                         const paths = row.path.split('/')

examples/demos/mediaplayer/MediaPlayer/SettingsInfo.qml

@@ -40,8 +40,8 @@ Rectangle {
                 id: tab
                 required property int index
                 required property string modelData
-                property color shadowColor:  bar.currentIndex === index ? "#41CD52" : "black"
+                property color shadowColor:  bar.currentIndex === index ? Config.highlightColor : "black"
-                property color textColor:  bar.currentIndex === index ? "#41CD52" : Config.secondaryColor
+                property color textColor:  bar.currentIndex === index ? Config.highlightColor : Config.secondaryColor
 
                 background: Rectangle {
                     opacity: 0.15

examples/demos/mediaplayer/MediaPlayer/TouchMenu.qml

@@ -17,12 +17,12 @@ Menu {
     background: Rectangle {
         color: Config.mainColor
         radius: 15
-        border.color: "#41CD52"
+        border.color: Config.highlightColor
     }
 
     component MenuItemLabel: Label {
         font.pixelSize: 24
-        color: "#41CD52"
+        color: Config.highlightColor
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         topPadding: 4
@@ -41,7 +41,7 @@ Menu {
         }
 
         background: Rectangle {
-            color: menuItem.pressed ? "#41CD52" : "transparent"
+            color: menuItem.pressed ? Config.highlightColor : "transparent"
             opacity: 0.25
         }
     }
@@ -57,7 +57,7 @@ Menu {
     Rectangle {
         width: parent.width
         implicitHeight: 1
-        color: "#41CD52"
+        color: Config.highlightColor
         opacity: 0.25
     }
 
@@ -70,7 +70,7 @@ Menu {
     Rectangle {
         width: parent.width
         implicitHeight: 1
-        color: "#41CD52"
+        color: Config.highlightColor
         opacity: 0.25
     }
 
@@ -82,7 +82,7 @@ Menu {
 
     Rectangle {
         implicitHeight: 1
-        color: "#41CD52"
+        color: Config.highlightColor
 
         Layout.fillWidth: true
     }

examples/demos/mediaplayer/MediaPlayer/UrlPopup.qml

@@ -15,7 +15,7 @@ Popup {
     height: column.height + 60
 
     property url path: ""
-    readonly property color borderColor: urlText.text ? (!errorMsg.visible ? "#41CD52" : "red") : Config.secondaryColor
+    readonly property color borderColor: urlText.text ? (!errorMsg.visible ? Config.highlightColor : "red") : Config.secondaryColor
 
     background: Rectangle {
         color: Config.mainColor