CODEWITHSUNDEEP
qtqmlqt-design-studio
Daniel
Daniel

Reputation: 11

How to use multiple styles in QML without adding ternaries everywhere?

I have a desktop application that is implemented in QML and C++. The application and UI supports a dark and light theme. Almost all component colors are placed in a singleton style file, which checks which theme is currently installed.

// Style.qml

pragma Singleton

import QtQuick 2.15

QtObject {
    property string mode: ThemeMode
    property color backgroundColor: mode === "light" ? 'white' : 'black'
    property color textColor: mode === "light" ? 'black' : 'white'
}

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    height: 320
    width: 240
    Rectangle {
        anchors.fill: parent
        color: Style.backgroundColor
        Text {
            text: "Hello world"
            color: Style.textColor
        }
        Text {
            text: "Hello world"
            color: Style.textColor
        }
    }

}

I would like a designer (who may not know QML and JavaScript) to be able to edit the user interface in Qt Design Studio without compiling the entire application.

For example, when editing the color of a component in Qt Design Studio, the color changes directly in the selected current component. Obviously, Qt Design Studio does not know anything about the fact that the colors are in Style.qml. In addition, we have a check by the ternary operator which theme is currently installed. What can be done about it?

mode === "light" ? 'white' : 'black'

Upvotes: 1

Views: 270

Answers (1)

Mars
Mars

Reputation: 2572

Warning: Singletons in the QDS content folder aren't currently properly reflected in QDS <4.3.2 (not sure about 4.4). If you define a singleton there, you need to manually create a qmldir file. See import\{project name}\qmldir for a reference.

To answer your question about how to edit the colors--you have to teach the designer to set colors based on the theme and to edit Style files themself.

To answer the question regarding how to do this simply:
You can implement multiple styles easily by utilizing Singletons + Inheritance.
Note, this works for settings files stored in QML as well, and can be great for overriding values for things like Debug vs Release or Windows vs Linux.

content\BaseTheme.qml

import QtQuick

QtObject { // Set the values to what you will use most commonly
  property color fontColor: "black"
  property int fontSizePx: 32
  property int fontSizePt: 14
  property color backgroundColor: "black"
  property color accentColor1: "green"
}

content\ThemeWithBigFont.qml

import QtQuick

BaseTheme {
  // Just override the parts you want to change
  fontSizePx: 42
}

Styles.qml

pragma Singleton

import QtQuick 6.5

// QtObject does not support children, so use Item
Item {
  property alias activeTheme: themeWithBigFont // Insert some logic here

  BaseTheme {
    id: baseTheme
  }

  ThemeWithBigFont {
    id: themeWithBigFont
  }
}

main.qml

import QtQuick

import content

Item {
  id: myObject
  property BaseTheme activeTheme: Styles.activeTheme

//These update if you change activeTheme
  property color backgroundColor: activeTheme.backgroundColor 
  property int fontSize: activeTheme.fontSizePx 
}

You can also do achieve the same by using Composition and builders, but that seems overly complicated

Upvotes: 2

Related Questions