Theme: theme style/font/padding handling updated

micieslak · micieslak · commit 85e5f554330d · 2025-11-26T15:11:35.000+01:00
diff --git a/storybook/main.qml b/storybook/main.qml
@@ -11,6 +11,8 @@ import QtQuick.Dialogs
 import QtMultimedia
 
 ApplicationWindow {
+    id: root
+
     width: 1450
     height: 840
     visible: true
@@ -26,7 +28,7 @@ ApplicationWindow {
 
         anchors.fill: parent
 
-        onDarkModeChanged: Theme.changeTheme(darkMode ? Theme.Style.Dark
-                                                      : Theme.Style.Light)
+        onDarkModeChanged: ThemeUtils.changeTheme(root, darkMode ? ThemeUtils.Style.Dark
+                                                                 : ThemeUtils.Style.Light)
     }
 }
diff --git a/storybook/pages/NotificationCardBaseEditor.qml b/storybook/pages/NotificationCardBaseEditor.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import StatusQ.Core.Theme
+import QtQuick.Window
 
 
 Control {
@@ -48,15 +49,15 @@ Control {
             Layout.leftMargin: Theme.padding
             text: "XS"
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXS)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXS)
             }
         }
 
         RadioButton {
             Layout.leftMargin: Theme.padding
             text: "S"
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeS)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeS)
             }
         }
 
@@ -65,31 +66,31 @@ Control {
             text: "M"
             checked: true
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeM)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeM)
             }
         }
 
         RadioButton {
             Layout.leftMargin: Theme.padding
             text: "L"
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeL)
             }
         }
 
         RadioButton {
             Layout.leftMargin: Theme.padding
             text: "XL"
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXL)
             }
         }
 
         RadioButton {
             Layout.leftMargin: Theme.padding
             text: "XXL"
             onCheckedChanged: {
-                Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXXL)
+                ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXXL)
             }
         }
 
diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@@ -87,7 +87,7 @@ StatusSectionLayout {
 
     required property bool isCentralizedMetricsEnabled
 
-    required property int theme // Theme.Style.xxx
+    required property int theme // ThemeUtils.Style.xxx
     required property int fontSize // ThemeUtils.FontSize.xxx
     required property int paddingFactor // ThemeUtils.PaddingFactor.xxx
 
diff --git a/ui/app/AppLayouts/Profile/views/AppearanceView.qml b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
@@ -15,7 +15,7 @@ import StatusQ.Controls as StatusQ
 SettingsContentBase {
     id: root
 
-    required property int theme // Theme.Style.xxx
+    required property int theme // ThemeUtils.Style.xxx
     required property int fontSize // ThemeUtils.FontSize.xxx
     required property int paddingFactor // ThemeUtils.PaddingFactor.xxx
 
@@ -139,10 +139,10 @@ SettingsContentBase {
                 Layout.fillWidth: true
                 image.source: Assets.png("appearance-light")
                 control.text: qsTr("Light")
-                control.checked: root.theme === Theme.Style.Light
+                control.checked: root.theme === ThemeUtils.Style.Light
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.Light)
+                        root.themeChangeRequested(ThemeUtils.Style.Light)
                     }
                 }
             }
@@ -151,10 +151,10 @@ SettingsContentBase {
                 Layout.fillWidth: true
                 image.source: Assets.png("appearance-dark")
                 control.text: qsTr("Dark")
-                control.checked: root.theme === Theme.Style.Dark
+                control.checked: root.theme === ThemeUtils.Style.Dark
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.Dark)
+                        root.themeChangeRequested(ThemeUtils.Style.Dark)
                     }
                 }
             }
@@ -163,10 +163,10 @@ SettingsContentBase {
                 Layout.fillWidth: true
                 image.source: Assets.png("appearance-system")
                 control.text: qsTr("System")
-                control.checked: root.theme === Theme.Style.System
+                control.checked: root.theme === ThemeUtils.Style.System
                 onRadioCheckedChanged: function(checked) {
                     if (checked) {
-                        root.themeChangeRequested(Theme.Style.System)
+                        root.themeChangeRequested(ThemeUtils.Style.System)
                     }
                 }
             }
diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml
@@ -4,6 +4,7 @@ import QtQuick
 
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import QtQml.Models
 
 import AppLayouts.Browser
@@ -868,7 +869,7 @@ Item {
         property bool enableMessageBackupPopupSeen
         property var recentEmojis
         property string skinColor // NB: must be a string for the twemoji lib to work; we don't want the `#` in the name
-        property int theme: Theme.Style.System
+        property int theme: ThemeUtils.Style.System
         property int fontSize: {
             if (appMain.width < ThemeUtils.portraitBreakpoint.width) {
                 return ThemeUtils.FontSize.FontSizeS
@@ -883,16 +884,9 @@ Item {
         }
 
         Component.onCompleted: {
-            Theme.changeTheme(appMainLocalSettings.theme)
-            Theme.changeFontSize(appMainLocalSettings.fontSize)
-            Theme.changePaddingFactor(appMainLocalSettings.paddingFactor)
-        }
-    }
-
-    Connections {
-        target: Application.styleHints
-        function onColorSchemeChanged() {
-            Theme.changeTheme(appMainLocalSettings.theme) // re-apply the theme when the System theme/colorscheme changes
+            ThemeUtils.changeTheme(appMain.Window.window, appMainLocalSettings.theme)
+            ThemeUtils.setFontSize(appMain.Window.window, appMainLocalSettings.fontSize)
+            ThemeUtils.setPaddingFactor(appMain.Window.window, appMainLocalSettings.paddingFactor)
         }
     }
 
@@ -2152,15 +2146,15 @@ Item {
 
                         onThemeChangeRequested: function(theme) {
                             appMainLocalSettings.theme = theme
-                            Theme.changeTheme(theme)
+                            ThemeUtils.changeTheme(appMain.Window.window, theme)
                         }
                         onFontSizeChangeRequested: function(fontSize) {
                             appMainLocalSettings.fontSize = fontSize
-                            Theme.changeFontSize(fontSize)
+                            ThemeUtils.setFontSize(appMain.Window.window, fontSize)
                         }
                         onPaddingFactorChangeRequested: function(paddingFactor) {
                             appMainLocalSettings.paddingFactor = paddingFactor
-                            Theme.changePaddingFactor(paddingFactor)
+                            ThemeUtils.setPaddingFactor(appMain.Window.window, paddingFactor)
                         }
                         // Communities related settings view:
                         onLeaveCommunityRequest: appMain.communitiesStore.leaveCommunity(communityId)
diff --git a/ui/main.qml b/ui/main.qml
@@ -26,6 +26,9 @@ import MobileUI
 Window {
     id: applicationWindow
 
+    Theme.style: Application.styleHints.colorScheme === Qt.ColorScheme.Dark
+                 ? Theme.Style.Dark : Theme.Style.Light
+
     property bool appIsReady: false
 
     readonly property AppStores.FeatureFlagsStore featureFlagsStore: AppStores.FeatureFlagsStore {
@@ -48,7 +51,7 @@ Window {
     readonly property MetricsStore metricsStore: MetricsStore {}
     readonly property UtilsStore utilsStore: UtilsStore {}
     readonly property LanguageStore languageStore: LanguageStore {}
-    readonly property bool appThemeDark: Theme.isDarkTheme
+    readonly property bool appThemeDark: Theme.style === Theme.Style.Dark
     readonly property bool portraitLayout: height > width
     property bool biometricFlowPending: false
     

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import QtQuick.Controls`
`3`	`3`	`import QtQuick.Layouts`
`4`	`4`
`5`	`5`	`import StatusQ.Core.Theme`
	`6`	`+import QtQuick.Window`
`6`	`7`
`7`	`8`
`8`	`9`	`Control {`
`@@ -48,15 +49,15 @@ Control {`
`48`	`49`	`Layout.leftMargin: Theme.padding`
`49`	`50`	`text: "XS"`
`50`	`51`	`onCheckedChanged: {`
`51`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXS)`
	`52`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXS)`
`52`	`53`	`}`
`53`	`54`	`}`
`54`	`55`
`55`	`56`	`RadioButton {`
`56`	`57`	`Layout.leftMargin: Theme.padding`
`57`	`58`	`text: "S"`
`58`	`59`	`onCheckedChanged: {`
`59`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeS)`
	`60`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeS)`
`60`	`61`	`}`
`61`	`62`	`}`
`62`	`63`
`@@ -65,31 +66,31 @@ Control {`
`65`	`66`	`text: "M"`
`66`	`67`	`checked: true`
`67`	`68`	`onCheckedChanged: {`
`68`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeM)`
	`69`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeM)`
`69`	`70`	`}`
`70`	`71`	`}`
`71`	`72`
`72`	`73`	`RadioButton {`
`73`	`74`	`Layout.leftMargin: Theme.padding`
`74`	`75`	`text: "L"`
`75`	`76`	`onCheckedChanged: {`
`76`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeL)`
	`77`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeL)`
`77`	`78`	`}`
`78`	`79`	`}`
`79`	`80`
`80`	`81`	`RadioButton {`
`81`	`82`	`Layout.leftMargin: Theme.padding`
`82`	`83`	`text: "XL"`
`83`	`84`	`onCheckedChanged: {`
`84`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXL)`
	`85`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXL)`
`85`	`86`	`}`
`86`	`87`	`}`
`87`	`88`
`88`	`89`	`RadioButton {`
`89`	`90`	`Layout.leftMargin: Theme.padding`
`90`	`91`	`text: "XXL"`
`91`	`92`	`onCheckedChanged: {`
`92`		`- Theme.changeFontSize(ThemeUtils.FontSize.FontSizeXXL)`
	`93`	`+ ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXXL)`
`93`	`94`	`}`
`94`	`95`	`}`
`95`	`96`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ import StatusQ.Controls as StatusQ`
`15`	`15`	`SettingsContentBase {`
`16`	`16`	`id: root`
`17`	`17`
`18`		`- required property int theme // Theme.Style.xxx`
	`18`	`+ required property int theme // ThemeUtils.Style.xxx`
`19`	`19`	`required property int fontSize // ThemeUtils.FontSize.xxx`
`20`	`20`	`required property int paddingFactor // ThemeUtils.PaddingFactor.xxx`
`21`	`21`
`@@ -139,10 +139,10 @@ SettingsContentBase {`
`139`	`139`	`Layout.fillWidth: true`
`140`	`140`	`image.source: Assets.png("appearance-light")`
`141`	`141`	`control.text: qsTr("Light")`
`142`		`- control.checked: root.theme === Theme.Style.Light`
	`142`	`+ control.checked: root.theme === ThemeUtils.Style.Light`
`143`	`143`	`onRadioCheckedChanged: function(checked) {`
`144`	`144`	`if (checked) {`
`145`		`- root.themeChangeRequested(Theme.Style.Light)`
	`145`	`+ root.themeChangeRequested(ThemeUtils.Style.Light)`
`146`	`146`	`}`
`147`	`147`	`}`
`148`	`148`	`}`
`@@ -151,10 +151,10 @@ SettingsContentBase {`
`151`	`151`	`Layout.fillWidth: true`
`152`	`152`	`image.source: Assets.png("appearance-dark")`
`153`	`153`	`control.text: qsTr("Dark")`
`154`		`- control.checked: root.theme === Theme.Style.Dark`
	`154`	`+ control.checked: root.theme === ThemeUtils.Style.Dark`
`155`	`155`	`onRadioCheckedChanged: function(checked) {`
`156`	`156`	`if (checked) {`
`157`		`- root.themeChangeRequested(Theme.Style.Dark)`
	`157`	`+ root.themeChangeRequested(ThemeUtils.Style.Dark)`
`158`	`158`	`}`
`159`	`159`	`}`
`160`	`160`	`}`
`@@ -163,10 +163,10 @@ SettingsContentBase {`
`163`	`163`	`Layout.fillWidth: true`
`164`	`164`	`image.source: Assets.png("appearance-system")`
`165`	`165`	`control.text: qsTr("System")`
`166`		`- control.checked: root.theme === Theme.Style.System`
	`166`	`+ control.checked: root.theme === ThemeUtils.Style.System`
`167`	`167`	`onRadioCheckedChanged: function(checked) {`
`168`	`168`	`if (checked) {`
`169`		`- root.themeChangeRequested(Theme.Style.System)`
	`169`	`+ root.themeChangeRequested(ThemeUtils.Style.System)`
`170`	`170`	`}`
`171`	`171`	`}`
`172`	`172`	`}`