Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Felgo Live Code Reloading: Web Editor

Run this example on your Android and iOS phone now, with the Felgo Live Scripting mobile app!

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 } }

1. Download Felgo Live Scripting app

2. Open the app and add the displayed Dev ID here.

QML Hot Reload on all Platforms

With Felgo Live, you can reload code changes in real-time on any connected device. While this web editor is just for demonstration purposes, you can use hot reloading also for development on your desktop.

Download the Felgo Developer App app to run your code on Android and iOS, from Windows, macOS or Linux.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded