[Kool]

Hi All,

I’m aiming for a particular style in my app but I’ve noticed that after deploying to an Android device the Theme is not honoured.

Below is an minimal example:

import Felgo 3.0
import QtQuick 2.0

App {
    onInitTheme: {
        Theme.colors.tintColor = Qt.rgba(68/255, 32/255, 32/255)
        Theme.colors.statusBarStyle = Theme.colors.statusBarStyleHidden

        Theme.colors.textColor = "white"

        Theme.backgroundColor = Theme.colors.tintLightColor
        Theme.secondaryBackgroundColor = Theme.colors.tintColor

        Theme.listItem.backgroundColor = Theme.colors.tintLightColor
    }

    NavigationStack {

        ListPage {
            title: qsTr("Main Page")
            backgroundColor: Qt.rgba(49/255, 38/255, 62/255)

            model: [
                {
                    text: "Test 1",
                    detailText: "Testing 123..."
                },
                {
                    text: "Test 2",
                    detailText: "Testing 123..."
                }

            ]
        }

    }
}

 

The style on my desktop (irrespective of whether Theme is set to Android/iOS/Desktop) looks nice: Desktop Style

However, when I deploy to an Android device, it looks like this (excuse the bad screen shot): Android style

Is there something I’m missing about the Theme style in Felgo? How can I achieve such a style in Android?

Many thanks!

[Kool]

(please remove the backgroundColor attribute from the ListPage, that was the look I was going for!)

It seems to be the style is different in the AppDrawer icon/menu on Android, too and therefore likely other items.

[Kool]

If I set:

Theme.colors.backgroundColor =  Qt.rgba(49/255, 38/255, 62/255)

Rather than the convenience variable:

Theme.backgroundColor = Qt.rgba(49/255, 38/255, 62/255)

I get part way to the desired effect.

[Kool]

I can confirm that I get the correct styling if I follow the above post.

[GüntherFelgo Team]

Hi Kool!

As you can see in the docs of the Theme type, Theme::backgroundColor is a read-only alias for Theme.colors.backgroundColor, which holds the actual setting for the backgroundColor.

Theme.backgroundColor only offers a quick access to the background color setting for using the color in your components. When trying to set a read-only property like this, you probably also see a warning in your Application Output that it is not possible to overwrite a read-only property.

Best,
Günther from Felgo