mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-10 06:16:32 +00:00
c236e01fc8
Supports system dark mode. Changes the user appearance setting to a 3-way setting of System, Light, Dark. New accounts will have their appearance setting set to "System", which uses the system setting to determine if dark mode should be applied. Breaking change: Users who had their settings on Light Theme, will now get the system theme (light or dark). Users who had their theme set to Dark, will now get the Light theme. At startup, the onboarding screens will have the system-level setting of dark mode applied or not. Once, logged in, the user settings will be applied. ## Note An appearance setting of "System" is not dynamic to the system-level setting. This means that if a user has "System" set for their appearance (and ie, the user has light mode set), and then user then changes their system setting from light to dark, the app will not respond until it is restarted. This is due to a limitation of Qt not having a reliable way to propagate these changes to QML.
114 lines
3.3 KiB
QML
114 lines
3.3 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtQuick.Controls.Universal 2.12
|
|
import "../../../../imports"
|
|
import "../../../../shared"
|
|
import "../../../../shared/status"
|
|
|
|
Item {
|
|
id: root
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
enum Theme {
|
|
System, // 0
|
|
Light, // 1
|
|
Dark // 2
|
|
}
|
|
|
|
function updateTheme(theme) {
|
|
let themeStr = Universal.theme === Universal.Dark ? "dark" : "light"
|
|
if (theme === AppearanceContainer.Theme.Light) {
|
|
themeStr = "light"
|
|
} else if (theme === AppearanceContainer.Theme.Dark) {
|
|
themeStr = "dark"
|
|
}
|
|
profileModel.changeTheme(theme)
|
|
Style.changeTheme(themeStr)
|
|
}
|
|
|
|
StyledText {
|
|
id: title
|
|
//% "Appearance setting"
|
|
text: qsTrId("appearance-setting")
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 24
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 24
|
|
font.weight: Font.Bold
|
|
font.pixelSize: 20
|
|
}
|
|
|
|
RowLayout {
|
|
id: themeSetting
|
|
anchors.top: title.bottom
|
|
anchors.topMargin: 20
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 24
|
|
StyledText {
|
|
//% "Theme (Light - Dark)"
|
|
text: qsTrId("theme-(light---dark)")
|
|
}
|
|
ButtonGroup { id: appearance }
|
|
|
|
StatusRadioButton {
|
|
checked: profileModel.profile.appearance === AppearanceContainer.Theme.System
|
|
Layout.alignment: Qt.AlignRight
|
|
ButtonGroup.group: appearance
|
|
rightPadding: 15
|
|
text: qsTr("System")
|
|
onClicked: {
|
|
root.updateTheme(AppearanceContainer.Theme.System)
|
|
}
|
|
}
|
|
StatusRadioButton {
|
|
checked: profileModel.profile.appearance === AppearanceContainer.Theme.Light
|
|
Layout.alignment: Qt.AlignRight
|
|
ButtonGroup.group: appearance
|
|
rightPadding: 15
|
|
text: qsTr("Light")
|
|
onClicked: {
|
|
root.updateTheme(AppearanceContainer.Theme.Light)
|
|
}
|
|
}
|
|
StatusRadioButton {
|
|
checked: profileModel.profile.appearance === AppearanceContainer.Theme.Dark
|
|
Layout.alignment: Qt.AlignRight
|
|
ButtonGroup.group: appearance
|
|
rightPadding: 0
|
|
text: qsTr("Dark")
|
|
onClicked: {
|
|
root.updateTheme(AppearanceContainer.Theme.Dark)
|
|
}
|
|
}
|
|
// For the case where the theme was finally loaded by status-go in init(),
|
|
// update the theme in qml
|
|
Connections {
|
|
target: profileModel
|
|
onProfileChanged: {
|
|
root.updateTheme(profileModel.profile.appearance)
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
property bool isCompactMode: appSettings.compactMode
|
|
id: compactModeSetting
|
|
anchors.top: themeSetting.bottom
|
|
anchors.topMargin: 20
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 24
|
|
StyledText {
|
|
//% "Chat Compact Mode"
|
|
text: qsTrId("chat-compact-mode")
|
|
}
|
|
Switch {
|
|
checked: compactModeSetting.isCompactMode
|
|
onToggled: function() {
|
|
appSettings.compactMode = !compactModeSetting.isCompactMode
|
|
}
|
|
}
|
|
}
|
|
}
|