Felgo Live Code Reloading: Web Editor

import QtQuick 2.7 import Qt.labs.settings 1.1 as LS // use own namespace to avoid conflicts import Felgo 3.0 App { id: app // Indicates that dark mode is currently active property bool darkThemeActive: false onInitTheme: { console.debug("Init") // Store the default light colors of the theme app.storeDefaultTheme() // Check if dark mode is active and apply colors accordingly app.checkAndApplyTheme() } onApplicationResumed: { // Also check dark mode if app is resumed from background app.checkAndApplyTheme() } // Store the user selection persistently // This could also be done using any other local storage // We use labs.settings as it handles default values very conveniently LS.Settings { id: settings // Create a persistent property called "uiMode" // with a default value of "light" // Any change to this property is stored persistently // and restored on next application start property string uiMode: "light" } // Our app layout, with the selection of ui modes NavigationStack { Page { title: qsTr("Dark Mode") backgroundColor: Theme.colors.secondaryBackgroundColor // Custom navigation bar item rightBarItem: NavigationBarItem { Rectangle { anchors.centerIn: parent width: dp(15) height: width radius: width/2 // Binding on the dark theme active property color: app.darkThemeActive ? "green" : "red" } } AppFlickable { id: flick anchors.fill: parent contentWidth: parent.width contentHeight: content.height Column { id: content width: parent.width SimpleSection { title: qsTr("UI Mode") } AppListItem { text: "Light" showDisclosure: false // We use an individual left icon for each item leftItem: Icon { icon: IconType.suno width: dp(20) anchors.verticalCenter: parent.verticalCenter } // If the item is active, we display a checkmark rightItem: Icon { icon: IconType.check color: Theme.colors.tintColor width: dp(26) anchors.verticalCenter: parent.verticalCenter visible: settings.uiMode == "light" } // If the item is pressed, we change the ui mode and store the selection onSelected: { settings.uiMode = "light" app.checkAndApplyTheme() } } AppListItem { text: "Dark" showDisclosure: false leftItem: Icon { icon: IconType.moono width: dp(20) anchors.verticalCenter: parent.verticalCenter } rightItem: Icon { icon: IconType.check color: Theme.colors.tintColor width: dp(26) anchors.verticalCenter: parent.verticalCenter visible: settings.uiMode == "dark" } onSelected: { settings.uiMode = "dark" app.checkAndApplyTheme() } } AppListItem { text: "Use device setting" showDisclosure: false lastInSection: true leftItem: Icon { icon: IconType.mobilephone width: dp(20) anchors.verticalCenter: parent.verticalCenter } rightItem: Icon { icon: IconType.check color: Theme.colors.tintColor width: dp(26) anchors.verticalCenter: parent.verticalCenter visible: settings.uiMode == "follow-system" } onSelected: { settings.uiMode = "follow-system" app.checkAndApplyTheme() } } SimpleSection { title: qsTr("Debug") } AppListItem { text: "Dark Theme" // Set text and color using a property binding rightText: app.darkThemeActive ? "Active" : "Inactive" rightTextColor: app.darkThemeActive ? "green" : "red" showDisclosure: false lastInSection: true enabled: false textColor: Theme.colors.disabledColor } } } } } // This method checks if dark mode is active and applies colors accordingly function checkAndApplyTheme() { app.darkThemeActive = checkDarkTheme(settings.uiMode) app.applyTheme(app.darkThemeActive) } // This methods checks it dark mode is currently active // Dark mode is active if either selected by the user directly // or if "follow-system" ui mode is selected and the native device dark mode is active function checkDarkTheme(mode) { if(mode === "light") { // User has selected light mode directly return false } else if(mode === "dark") { // User has selected dark mode directly return true } else if (mode === "follow-system") { // User has selected "follow-system" ui mode, so we check the device setting if(Qt.platform.os === "ios") { var uiApplicationClass = NativeObjectUtils.getClass("UIApplication") var application = uiApplicationClass.getStaticProperty("sharedApplication") var uiStyle = application.getProperty("keyWindow").getProperty("rootViewController").getProperty("traitCollection").getProperty("userInterfaceStyle") // UIUserInterfaceStyle.dark -> 2 // https://developer.apple.com/documentation/uikit/uiuserinterfacestyle/dark return uiStyle === 2 } else if(Qt.platform.os === "android") { var context = NativeObjectUtils.getContext() var configuration = context.callMethod("getResources").callMethod("getConfiguration") var uiMode = configuration.getProperty("uiMode") var uiModeNightMask = configuration.getProperty("UI_MODE_NIGHT_MASK") return (uiMode & uiModeNightMask) === configuration.getProperty("UI_MODE_NIGHT_YES") } else { // On other platforms than iOS and Android, we return false return false } } } // Apply the colors for either dark or light mode function applyTheme(dark) { if(dark) { // For dark mode, we use some nice dark colors Theme.colors.backgroundColor = "#000" Theme.colors.secondaryBackgroundColor = "#000" Theme.colors.selectedBackgroundColor = "#333" Theme.colors.textColor = "#fff" Theme.colors.dividerColor = Theme.isAndroid ? "transparent" : "#333" Theme.listItem.backgroundColor = "#1c1c1e" Theme.listItem.textColor = "#fff" Theme.navigationBar.backgroundColor = Theme.colors.backgroundColor Theme.navigationBar.titleColor = Theme.colors.textColor Theme.navigationBar.dividerColor = "transparent" Theme.colors.statusBarStyle = Theme.colors.statusBarStyleWhite } else { // For light mode, we use the stored default theme values Theme.colors.backgroundColor = defaultTheme.backgroundColor Theme.colors.secondaryBackgroundColor = defaultTheme.secondaryBackgroundColor Theme.colors.selectedBackgroundColor = defaultTheme.selectedBackgroundColor Theme.colors.textColor = defaultTheme.textColor Theme.colors.dividerColor = defaultTheme.dividerColor Theme.listItem.backgroundColor = defaultTheme.listItemBackgroundColor Theme.listItem.textColor = defaultTheme.listItemTextColor Theme.navigationBar.backgroundColor = defaultTheme.navigationBarBackgroundColor Theme.navigationBar.titleColor = defaultTheme.navigationBarTitleColor Theme.navigationBar.dividerColor = defaultTheme.navigationBarDividerColor Theme.colors.statusBarStyle = Theme.isAndroid ? Theme.colors.statusBarStyleWhite : Theme.colors.statusBarStyleBlack } } // Store the default light theme values, as they would be overwritten by dark mode function storeDefaultTheme() { defaultTheme.backgroundColor = Theme.colors.backgroundColor defaultTheme.secondaryBackgroundColor = Theme.colors.secondaryBackgroundColor defaultTheme.selectedBackgroundColor = Theme.colors.selectedBackgroundColor defaultTheme.textColor = Theme.colors.textColor defaultTheme.dividerColor = Theme.colors.dividerColor defaultTheme.listItemBackgroundColor = Theme.listItem.backgroundColor defaultTheme.listItemTextColor = Theme.listItem.textColor defaultTheme.navigationBarBackgroundColor = Theme.navigationBar.backgroundColor defaultTheme.navigationBarTitleColor = Theme.navigationBar.titleColor defaultTheme.navigationBarDividerColor = Theme.navigationBar.dividerColor } // Simple storage object for our default theme values of the light mode QtObject { id: defaultTheme property color backgroundColor property color secondaryBackgroundColor property color selectedBackgroundColor property color textColor property color dividerColor property color listItemBackgroundColor property color listItemTextColor property color navigationBarBackgroundColor property color navigationBarTitleColor property color navigationBarDividerColor } }

Run