Add option for "invert score" to follow app theme

src/appshell/appshell.qrc

@@ -46,6 +46,7 @@
         <file>qml/Preferences/internal/UiFontSection.qml</file>
         <file>qml/Preferences/internal/UiColorsSection.qml</file>
         <file>qml/Preferences/internal/ColorAndWallpaperSection.qml</file>
+        <file>qml/Preferences/internal/PageSection.qml</file>
         <file>qml/Preferences/internal/ImportStyleSection.qml</file>
         <file>qml/Preferences/internal/CharsetsSection.qml</file>
         <file>qml/Preferences/internal/MidiSection.qml</file>

src/appshell/qml/Preferences/AppearancePreferencesPage.qml

@@ -111,20 +111,42 @@ PreferencesPage {
 
         SeparatorLine {}
 
-        UiFontSection {
-            allFonts: appearanceModel.allFonts()
-            currentFontIndex: appearanceModel.currentFontIndex
-            bodyTextSize: appearanceModel.bodyTextSize
+        PageSection {
+            id: paperSettings
+
+            width: parent.width
+
+            scoreInversionEnabled: appearanceModel.scoreInversionEnabled
+            isOnlyInvertInDarkTheme: appearanceModel.isOnlyInvertInDarkTheme
+            isCurrentThemeDark: appearanceModel.isCurrentThemeDark
+
+            colorAndWallpaper.useColor: appearanceModel.foregroundUseColor
+            colorAndWallpaper.color: appearanceModel.foregroundColor
+            colorAndWallpaper.wallpaperPath: appearanceModel.foregroundWallpaperPath
+            colorAndWallpaper.wallpapersDir: appearanceModel.wallpapersDir()
+            colorAndWallpaper.wallpaperFilter: appearanceModel.wallpaperPathFilter()
 
             navigation.section: root.navigationSection
             navigation.order: root.navigationOrderStart + 4
 
-            onFontChangeRequested: function(newFontIndex) {
-                appearanceModel.currentFontIndex = newFontIndex
+            onScoreInversionEnableChangeRequested: function(enable) {
+                appearanceModel.scoreInversionEnabled = enable
             }
 
-            onBodyTextSizeChangeRequested: function(newBodyTextSize) {
-                appearanceModel.bodyTextSize = newBodyTextSize
+            onIsOnlyInvertInDarkThemeChangeRequested: function(enable) {
+                appearanceModel.isOnlyInvertInDarkTheme = enable
+            }
+
+            colorAndWallpaper.onUseColorChangeRequested: function(newValue) {
+                appearanceModel.foregroundUseColor = newValue
+            }
+
+            colorAndWallpaper.onColorChangeRequested: function(newColor) {
+                appearanceModel.foregroundColor = newColor
+            }
+
+            colorAndWallpaper.onWallpaperPathChangeRequested: function(newWallpaperPath) {
+                appearanceModel.foregroundWallpaperPath = newWallpaperPath
             }
 
             onFocusChanged: {
@@ -173,35 +195,20 @@ PreferencesPage {
 
         SeparatorLine {}
 
-        ColorAndWallpaperSection {
-            id: paperSettings
-
-            width: parent.width
-
-            enabled: !appearanceModel.scoreInversionEnabled
-            opacityOverride: paperSettings.enabled ? 1.0 : 0.6
-
-            title: qsTrc("appshell/preferences", "Paper")
-            wallpaperDialogTitle: qsTrc("appshell/preferences", "Choose notepaper")
-            useColor: appearanceModel.foregroundUseColor
-            color: appearanceModel.foregroundColor
-            wallpaperPath: appearanceModel.foregroundWallpaperPath
-            wallpapersDir: appearanceModel.wallpapersDir()
-            wallpaperFilter: appearanceModel.wallpaperPathFilter()
+        UiFontSection {
+            allFonts: appearanceModel.allFonts()
+            currentFontIndex: appearanceModel.currentFontIndex
+            bodyTextSize: appearanceModel.bodyTextSize
 
             navigation.section: root.navigationSection
             navigation.order: root.navigationOrderStart + 6
 
-            onUseColorChangeRequested: function(newValue) {
-                appearanceModel.foregroundUseColor = newValue
-            }
-
-            onColorChangeRequested: function(newColor) {
-                appearanceModel.foregroundColor = newColor
+            onFontChangeRequested: function(newFontIndex) {
+                appearanceModel.currentFontIndex = newFontIndex
             }
 
-            onWallpaperPathChangeRequested: function(newWallpaperPath) {
-                appearanceModel.foregroundWallpaperPath = newWallpaperPath
+            onBodyTextSizeChangeRequested: function(newBodyTextSize) {
+                appearanceModel.bodyTextSize = newBodyTextSize
             }
 
             onFocusChanged: {
@@ -214,7 +221,6 @@ PreferencesPage {
         SeparatorLine {}
 
         ThemeAdditionalOptionsSection {
-            scoreInversionEnabled: appearanceModel.scoreInversionEnabled
 
             navigation.section: root.navigationSection
             navigation.order: root.navigationOrderStart + 7
@@ -228,10 +234,6 @@ PreferencesPage {
                     root.ensureContentVisibleRequested(Qt.rect(x, y, width, height))
                 }
             }
-
-            onScoreInversionEnableChangeRequested: function(enable) {
-                appearanceModel.scoreInversionEnabled = enable
-            }
         }
     }
 }

src/appshell/qml/Preferences/internal/ColorAndWallpaperSection.qml

@@ -30,6 +30,8 @@ BaseSection {
 
     navigation.direction: NavigationPanel.Both
 
+    property int navigationRowStart: 0
+
     property alias wallpaperDialogTitle: wallpaperPicker.dialogTitle
 
     property bool useColor: true
@@ -63,7 +65,7 @@ BaseSection {
 
             navigation.name: "ColorBox"
             navigation.panel: root.navigation
-            navigation.row: 0
+            navigation.row: root.navigationRowStart
             navigation.column: 0
 
             onToggled: {
@@ -80,7 +82,7 @@ BaseSection {
 
             navigation.name: "ColorBox"
             navigation.panel: root.navigation
-            navigation.row: 0
+            navigation.row: root.navigationRowStart
             navigation.column: 1
 
             onNewColorSelected: function(newColor) {
@@ -92,11 +94,11 @@ BaseSection {
             implicitWidth: root.columnWidth
 
             checked: !root.useColor
-            text: qsTrc("appshell/preferences", "Wallpaper")
+            text: qsTrc("appshell/preferences", "Image")
 
             navigation.name: "WallpaperBox"
             navigation.panel: root.navigation
-            navigation.row: 1
+            navigation.row: root.navigationRowStart + 1
             navigation.column: 0
 
             onToggled: {
@@ -111,7 +113,7 @@ BaseSection {
             enabled: !root.useColor
 
             navigation: root.navigation
-            navigationRowOrderStart: 1
+            navigationRowOrderStart: root.navigationRowStart + 1
             navigationColumnOrderStart: 1
 
             onPathEdited: function(newPath) {

src/appshell/qml/Preferences/internal/PageSection.qml

@@ -0,0 +1,98 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-Studio-CLA-applies
+ *
+ * MuseScore Studio
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2021 MuseScore Limited
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick
+import QtQuick.Layouts
+
+import Muse.Ui
+import Muse.UiComponents
+
+BaseSection {
+    id: root
+
+    title: qsTrc("appshell/preferences", "Page")
+
+    navigation.direction: NavigationPanel.Both
+
+    property alias scoreInversionEnabled: scoreInversionEnable.checked
+    property alias isOnlyInvertInDarkTheme: isOnlyInvertInDarkTheme.checked
+    property bool isCurrentThemeDark
+    property alias colorAndWallpaper: colorAndWallpaper
+
+    signal scoreInversionEnableChangeRequested(bool enable)
+    signal isOnlyInvertInDarkThemeChangeRequested(bool enable)
+
+    GridLayout {
+        id: gridSection
+
+        rows: 2
+        columns: 2
+
+        rowSpacing: root.rowSpacing
+        columnSpacing: root.columnSpacing
+
+        ToggleButton {
+            id: scoreInversionEnable
+            implicitWidth: root.columnWidth
+
+            text: qsTrc("appshell/preferences", "Invert score colors")
+
+            navigation.name: "ScoreInversionBox"
+            navigation.panel: root.navigation
+            navigation.row: 0
+            navigation.column: 0
+
+            onToggled: {
+                root.scoreInversionEnableChangeRequested(!checked)
+            }
+        }
+
+        CheckBox {
+            id: isOnlyInvertInDarkTheme
+            width: root.columnWidth
+
+            enabled: root.scoreInversionEnabled
+
+            text: qsTrc("appshell/preferences", "Only invert colors in dark theme")
+
+            navigation.name: "IsOnlyInvertInDarkThemeBox"
+            navigation.panel: root.navigation
+            navigation.row: 0
+            navigation.column: 1
+
+            onClicked: {
+                root.isOnlyInvertInDarkThemeChangeRequested(!checked)
+            }
+        }
+    }
+
+    ColorAndWallpaperSection {
+        id: colorAndWallpaper
+
+        enabled: !root.scoreInversionEnabled || (root.isOnlyInvertInDarkTheme && !root.isCurrentThemeDark)
+        opacityOverride: enabled ? 1.0 : ui.theme.itemOpacityDisabled
+
+        wallpaperDialogTitle: qsTrc("appshell/preferences", "Choose notepaper")
+
+        navigation: root.navigation
+        navigationRowStart: 1
+    }
+}

src/appshell/qml/Preferences/internal/ThemeAdditionalOptionsSection.qml

@@ -26,28 +26,10 @@ import Muse.UiComponents 1.0
 BaseSection {
     id: root
 
-    property alias scoreInversionEnabled: scoreInversionEnable.checked
-
     signal resetThemeToDefaultRequested()
-    signal scoreInversionEnableChangeRequested(bool enable)
-
-    CheckBox {
-        id: scoreInversionEnable
-        width: parent.width
-
-        text: qsTrc("appshell/preferences", "Invert score")
-
-        navigation.name: "ScoreInversionBox"
-        navigation.panel: root.navigation
-        navigation.row: 0
-
-        onClicked: {
-            root.scoreInversionEnableChangeRequested(!checked)
-        }
-    }
 
     FlatButton {
-        text: qsTrc("appshell/preferences", "Reset to default")
+        text: qsTrc("appshell/preferences", "Reset appearance to default")
 
         navigation.name: "ResetButton"
         navigation.panel: root.navigation

src/appshell/qml/Preferences/internal/ThemesSection.qml

@@ -29,7 +29,7 @@ import "../../shared"
 BaseSection {
     id: root
 
-    title: highContrastEnabled ? qsTrc("appshell/preferences", "High contrast themes") : qsTrc("appshell/preferences", "Themes")
+    title: highContrastEnabled ? qsTrc("appshell/preferences", "High-contrast theme") : qsTrc("appshell/preferences", "Theme")
     navigation.direction: NavigationPanel.Both
 
     property bool highContrastEnabled: false

src/appshell/qml/Preferences/internal/UiFontSection.qml

@@ -26,7 +26,7 @@ import Muse.UiComponents 1.0
 BaseSection {
     id: root
 
-    title: qsTrc("appshell/preferences", "Appearance")
+    title: qsTrc("appshell/preferences", "App text")
 
     property alias allFonts: selectFontControl.model
 
@@ -39,7 +39,7 @@ BaseSection {
     ComboBoxWithTitle {
         id: selectFontControl
 
-        title: qsTrc("appshell/preferences", "Font face")
+        title: qsTrc("appshell/preferences", "Typeface")
         columnWidth: root.columnWidth
 
         navigation.name: "FontFaceBox"

src/appshell/view/preferences/appearancepreferencesmodel.cpp

@@ -56,11 +56,16 @@ void AppearancePreferencesModel::init()
         emit bodyTextSizeChanged();
     });
 
-    engravingConfiguration()->scoreInversionChanged().onNotify(this, [this]() {
+    notationConfiguration()->scoreInversionChanged().onNotify(this, [this]() {
         emit invertScoreColorChanged();
         emit foregroundColorChanged();
     });
 
+    notationConfiguration()->isOnlyInvertInDarkThemeChanged().onNotify(this, [this]() {
+        emit isOnlyInvertInDarkThemeChanged();
+        emit foregroundColorChanged();
+    });
+
     notationConfiguration()->backgroundChanged().onNotify(this, [this]() {
         emit backgroundColorChanged();
         emit backgroundUseColorChanged();
@@ -254,7 +259,17 @@ QString AppearancePreferencesModel::foregroundWallpaperPath() const
 
 bool AppearancePreferencesModel::scoreInversionEnabled() const
 {
-    return engravingConfiguration()->scoreInversionEnabled();
+    return notationConfiguration()->scoreInversionEnabled();
+}
+
+bool AppearancePreferencesModel::isOnlyInvertInDarkTheme() const
+{
+    return notationConfiguration()->isOnlyInvertInDarkTheme();
+}
+
+bool AppearancePreferencesModel::isCurrentThemeDark() const
+{
+    return uiConfiguration()->isDarkMode();
 }
 
 void AppearancePreferencesModel::setCurrentThemeCode(const QString& themeCode)
@@ -368,6 +383,16 @@ void AppearancePreferencesModel::setScoreInversionEnabled(bool value)
         return;
     }
 
-    engravingConfiguration()->setScoreInversionEnabled(value);
+    notationConfiguration()->setScoreInversionEnabled(value);
     emit invertScoreColorChanged();
 }
+
+void AppearancePreferencesModel::setOnlyInvertInDarkTheme(bool value)
+{
+    if (value == isOnlyInvertInDarkTheme()) {
+        return;
+    }
+
+    notationConfiguration()->setOnlyInvertInDarkTheme(value);
+    emit isOnlyInvertInDarkThemeChanged();
+}