QML – How to Change Background Color of TextField in Ubuntu SDK

application-developmentqmlubuntu-sdkubuntu-touch

I have a situation where the background color of my QML app MainView causes the textfield entry to have grey lettering on equally dark brown background. This makes it almost impossible to read what text has been entered into the textfield.

When entering text it's fine because the background turns white and the dark text is now visible, but when a texfield isn't selected the text is unreadable.

Is there a way to change the background color of a textfield? I've already tried changing the text color, and it works when not entering text, but as soon as I click in the textfield to enter text I can't read it anymore because the textfield background color turns white and the text color is also very light.

Anyone have a solution to this issue they could suggest?

Thanks

Best Answer

The Ubuntu SDK comes with its own styled TextField element. On dark background you can use the default Qt version by importing QtQuick.Controls (14.04 only). It will always render a white background but can also be styled with TextFieldStyle:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    width: 400
    height: 300
    backgroundColor: "black"

    Column {
        spacing: units.gu(2)
        anchors.centerIn: parent
        TextField {
            placeholderText: "ask"
        }
        TextField {
            placeholderText: "Enter text"
            text: "ubuntu"
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    radius: 5
                    color: "gold"
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "#333"
                    border.width: 1
                }
            }
        }
    }
}

It will look like the screenshot below:

enter image description here

Source: http://qt-project.org/doc/qt-5/qml-qtquick-controls-styles-textfieldstyle.html

Related Question