Themes

When you create a Cascades app, most of the UI controls that you use have a predefined look and feel. Visual elements, such as font color, background color, and shading, are already set for these controls, so you don't have to worry about setting them manually. Cascades controls are visually consistent so that your UIs maintain an appearance that's attractive and user-friendly.

The specific look and feel of UI controls depends on your app's theme. A theme is a set of visual attributes that apply to all of the Cascades controls that you use in your app. For example, consider the Button that's pictured to the right.

Screen shot that shows a button in Cascades.

The background color and text color of the button depend on the theme that the app uses. Similarly, the theme also controls the visual attributes of all other controls, such as the default background color of a Page.

There are two components that comprise the theme: the visual style and the brand color.

Visual styles

The visual style defines most of the visual characteristics of the theme. Currently, there are two styles that you can use in your app: bright and dark. Depending on the device that your app is run on, the default visual style can change. If your app is run on a device with an LCD screen (such as the BlackBerry Z10 smartphone), the bright style is used by default. If your app is run on a device with an OLED screen (such as the BlackBerry Q10 smartphone), the dark style is used by default. To learn more about how to design your apps for OLED screens, see Designing for OLED displays in the UI Guidelines for BlackBerry 10.


A side-by-side comparison of the light and dark themes.

Because you might not know which device your app is running on, you should design your app's assets to work with both bright and dark visual styles. For example, if you use custom icons or other images, you should make sure that they appear correctly in both styles. To learn more about developing apps for different BlackBerry 10 devices, see Device characteristics.

To help you manage your bright and dark assets, Cascades includes a static asset selector that determines the theme that's running on the device and selects the right set of assets from the .bar file automatically. This selector lets you specify theme-based assets, as well as resolution-based assets. To learn more about selecting assets based on theme, see Static asset selection.

Setting the visual style

If you want to force your app to use a particular visual style, you can specify the theme in the bar-descriptor.xml file of your project. This file is included automatically when you create a new project, and it contains general settings that apply to your entire app, such as permissions, build configurations, and author information.

Momentics 2.1 One way to modify the bar-descriptor.xml file to use the visual style is by using the Theme drop-down list on the Application tab.

A screen shot that shows the theme selector in the Momentics IDE.

Alternatively, you can manually edit the bar-descriptor.xml file to add an environment variable that specifies the theme that you want. The environment variable is called CASCADES_THEME and you can set it to either bright or dark. Here's the bar-descriptor configuration to force your app to use a dark style:

<env var="CASCADES_THEME" value="dark"/>

In general, you shouldn't force your app to use the bright style. Instead, either create assets that appear properly using both themes, or create separate assets for each theme and use the static asset selector to select the correct set when your app runs.

Changing the visual style at runtime 10.3

You can also change the visual style while the app is running. When the visual style changes, the application automatically updates all core components in the scene to the new style. Here's an example that lets the user to switch between the dark and bright styles as the app runs.

import bb.cascades 1.3


Page {
    id: page
    
    Container {
        Button {
            text: "Switch theme"
            
            // Checks the current theme and then flips the value
            onClicked: {
                if (Application.themeSupport.theme.colorTheme.style == VisualStyle.Bright) {
                	Application.themeSupport.setVisualStyle(VisualStyle.Dark);
                }       
                else {
                    Application.themeSupport.setVisualStyle(VisualStyle.Bright);
                }
            }
        }
    }
}
#include "applicationui.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/Button>
#include <bb/cascades/ColorTheme>
#include <bb/cascades/Container>
#include <bb/cascades/Page>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/Theme>
#include <bb/cascades/ThemeSupport>
#include <bb/cascades/VisualStyle>

using namespace bb::cascades;

ApplicationUI::ApplicationUI(bb::cascades::Application *app) :
        QObject(app)
{
    // Creates the ui controls
    Page *root = new Page();
    Container *rootContainer = Container::create();
    mButton = Button::create().text("Switch theme");

    // Connects the button clicked signal to its handler
    bool connectResult;
    Q_UNUSED(connectResult);

    connectResult = connect(mButton, SIGNAL(clicked()), this, SLOT(onButtonClicked()));
    Q_ASSERT(connectResult);

    // Adds the components to the scene
    rootContainer->add(mButton);
    root->setContent(rootContainer);

    app->setScene(root);
}

// Changes the theme in response to a button click
void ApplicationUI::onButtonClicked()
{
    if (Application::instance()->themeSupport()->theme()->colorTheme()->style() == VisualStyle::Bright)
    {
        Application::instance()->themeSupport()->setVisualStyle(VisualStyle::Dark);
    }
    else
    {
        Application::instance()->themeSupport()->setVisualStyle(VisualStyle::Bright);
    }
}
#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_

#include <QObject>

namespace bb
{
    namespace cascades
    {
        class Application;
        class Button;

    }
}

class ApplicationUI : public QObject
{
    Q_OBJECT
public:
    ApplicationUI(bb::cascades::Application *app);
    virtual ~ApplicationUI() { }
private slots:
    void onButtonClicked();
private:
    bb::cascades::Button* mButton;
};

#endif /* ApplicationUI_HPP_ */

When updating the scene at runtime, any theme-based assets controlled by the static asset selector are not updated automatically. Instead of using the static asset selector for theme-based assets, consider using some of the following workarounds:

  • For items like containers, text, or custom controls, instead of maintaining separate versions for each theme, bind their visual attributes directly to the application's UI palette. When the theme changes, your components are updated automatically with the new palette. Binding to the UI palette also ensures that your app continues to look good in future OS updates, even if the default themes change in any way. For more information about binding to the app's color palette, see UI palette.
  • For images, instead of maintaining separate versions for the dark and bright styles, consider using colorization to change your images dynamically. Image colorization can occur in several ways:
    • Use the ImageView::filterColor property, which allows you to specify a color filter to overlay your image with. To apply the color filter, bind the filterColor property to a color in the app's UI palette and the property is updated automatically when the visual style changes.
    • Allow the framework to colorize your images automatically. To enable colorization, create a white or grayscale image and set the type property in its .amd file to template. When the theme changes, the color of the image changes automatically to fit with the new theme. With some controls, colorization can also occur in response to user interaction. For example, tapping on an action item colorizes the action item icon using the app's brand color.

For more information about colorization and filters, see Image colorization.

Retrieving the visual style

Cascades provides two different ways for you to retrieve the current visual style. Both ways involve using the Application::themeSupport property. To retrieve the current visual style of your app, there are several classes that you need to use together: ThemeSupport, Theme, ColorTheme, and VisualStyle.

The VisualStyle class is an enumeration that represents a theme's overall visual color style. Currently, this class includes enumeration values that correspond to a bright style ( VisualStyle::Bright) and a dark style ( VisualStyle::Dark). Here's an example that shows how to retrieve the current value:

import bb.cascades 1.2

Page {
    // A property that stores the current theme
    property variant theme : Application.themeSupport.theme.colorTheme.style
    id: page
    
    Container {
        Label {
            text: page.themeStyleToString()
        }
    }

    // Converts the VisualStyle value to a string and returns the string 
    function themeStyleToString() {
        switch (theme) {
            case VisualStyle.Bright:
                return "Theme: Bright"
            case VisualStyle.Dark:
                return "Theme: Dark"
        }
        return "Theme: Unknown"
    }
}
VisualStyle::Type style = Application::instance()->themeSupport()->theme()->colorTheme()->style();

switch (style) {
    case VisualStyle::Bright:
        qDebug() << "The theme is bright";
        break;
    case VisualStyle::Dark:
        Debug() << "The theme is dark";
        break;
    default:
        Debug() << "The theme is unknown";
        break;
}

Brand colors

In addition to setting the visual style, you can also set a brand color for your app. The framework uses the brand color to provide accents on UI components such as sliders, check boxes, and title bars. The default color is blue, but you can provide any color that you want. To learn about how to choose effective colors, see Color in the UI Guidelines.

The brand color for your app is also known as the primary color. When you provide your own primary color, it's not only that color that is affected. The color that you choose might not contrast with the default UI palette sufficiently, so the framework creates a whole new palette automatically, taking the brand color and the visual style into consideration. This approach removes all the guesswork in trying to determine what colors your other components should be, such as the background color and text. Consider the following image in which the framework uses white as the base color for the toggle buttons and check boxes.

Core controls with various colors and a light base.

If the primary colors are a few tints lighter instead and the overall visual style is set to dark, the framework changes these colors to contrast with the new primary colors sufficiently.

An image showing how core controls appear with various colors and a dark base.

You can also set the primary base color, although it's not as important as the primary color. Usually, the framework uses the primary base color to create gradients with the primary color.

The image on the right uses two different shades of green as its primary and primary base colors. The framework combines the two colors to create a gradient on the title bar.

An image that shows the gradient on the title bar.

Best practices for brand colors

When choosing a primary base color, it should be a similar but darker shade of the primary color.

Setting brand colors 10.3

You can set the brand color for your app in the bar-descriptor.xml file of your project, similarly to how you set the theme.

Momentics 2.1 The easiest way is to set these values is by using the Primary color and Primary base color palettes on the Application tab.

A screen shot that shows the brand color selectors in the Momentics IDE.

Alternatively, you can manually edit the bar-descriptor.xml file to add an environment variable that specifies the primary and primary base that you want. The environment variable is called CASCADES_THEME and it's also used to specify the visual style for the app. Primary and primary base colors are specified using hex values. Here's the bar-descriptor.xml configuration to use the default theme with a primary color and primary base color:

<env var="CASCADES_THEME" value="default?primaryColor=0xDE5A5A&amp;primaryBase=0xCC0000"/>

Here's the bar-descriptor.xml configuration to force a bright theme and use a primary color with no primary base color:

<env var="CASCADES_THEME" value="bright?primaryColor=0xDE5A5A"/>

Changing brand colors at runtime 10.3

You can also change the primary color and primary base colors while the app is running. When the brand colors change, the application generates a new UI palette and updates all core components in the scene to the new colors. Here's an example that allows the user to manually select the primary and primary base colors for the app. After the user selects a value from one of the drop-down lists, the app calls setPrimaryColor() to update the color.

import bb.cascades 1.3

Page {
    id: root
    titleBar: TitleBar {
        title: "Brand colors"
    }
    Container {
        layout: DockLayout {}
        Container {
            DropDown {
                id: primaryDropDown
                title: "Primary color"
                
                Option { text: "Default"; value: 0 }
                Option { text: "Red"; value: Color.Red }
                Option { text: "Green"; value: Color.Green }
                Option { text: "Yellow"; value: Color.Yellow }
                
                onSelectedValueChanged: {
                    Application.themeSupport.setPrimaryColor(primaryDropDown.selectedValue, 
                            primaryBaseDropDown.selectedValue)
                }
            }
            DropDown {
                id: primaryBaseDropDown
                title: "Primary base color"
                
                Option { text: "Default"; value: 0 }
                Option { text: "Dark Red"; value: Color.DarkRed }
                Option { text: "Dark Green"; value: Color.DarkGreen }
                Option { text: "Dark Yellow"; value: Color.DarkYellow }
                
                onSelectedValueChanged: {
                    Application.themeSupport.setPrimaryColor(primaryDropDown.selectedValue, 
                            primaryBaseDropDown.selectedValue)
                }
            }
        }
    }
}
#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_

#include <QObject>

namespace bb
{
    namespace cascades
    {
        class DropDown;
    }
}

class ApplicationUI : public QObject
{
    Q_OBJECT
    
public:
    ApplicationUI();
    virtual ~ApplicationUI() {}
private slots:
    /*!
     * Changes the brand color in response to changes to the dropdowns.
     */
    void onSelectedValueChanged(const QVariant &selectedValue);
private:
    /*!
     * The dropdown controls for selecting color values.
     */
    bb::cascades::DropDown *mPrimaryDropDown;
    bb::cascades::DropDown *mPrimaryBaseDropDown;
};

#endif /* ApplicationUI_HPP_ */
#include "applicationui.hpp"

#include <bb/cascades/AbstractPane>
#include <bb/cascades/Application>
#include <bb/cascades/Button>
#include <bb/cascades/Color>
#include <bb/cascades/Container>
#include <bb/cascades/DockLayout>
#include <bb/cascades/DropDown>
#include <bb/cascades/Option>
#include <bb/cascades/Page>
#include <bb/cascades/Paint>
#include <bb/cascades/ThemeSupport>
#include <bb/cascades/TitleBar>
#include <bb/cascades/QmlDocument>

using namespace bb::cascades;

ApplicationUI::ApplicationUI() :
        QObject()
{
    Page *root = new Page();
    root->setTitleBar(TitleBar::create().title("Brand color"));

    // Creates all the containers and dropdowns and sets their options
    Container *rootContainer = Container::create();
    rootContainer->setLayout(new DockLayout());

    Container *topContainer = Container::create();

    mPrimaryDropDown = DropDown::create().title("Primary color");
    mPrimaryDropDown->add(Option::create().text("Default").value(0));
    mPrimaryDropDown->add(Option::create().text("Red").value(QVariant::fromValue<Color>(Color::Red)));
    mPrimaryDropDown->add(Option::create().text("Green").value(QVariant::fromValue<Color>(Color::Green)));
    mPrimaryDropDown->add(Option::create().text("Yellow").value(QVariant::fromValue<Color>(Color::Yellow)));

    mPrimaryBaseDropDown = DropDown::create().title("Primary base color");
    mPrimaryBaseDropDown->add(Option::create().text("Default").value(0));
    mPrimaryBaseDropDown->add(Option::create().text("Dark Red").value(QVariant::fromValue<Color>(Color::DarkRed)));
    mPrimaryBaseDropDown->add(Option::create().text("Dark Green").value(QVariant::fromValue<Color>(Color::DarkGreen)));
    mPrimaryBaseDropDown->add(Option::create().text("Dark Yellow").value(QVariant::fromValue<Color>(Color::DarkYellow)));

    // Connects the DropDown's valueChanged signals to a slot that changes the color
    bool connectResult;
    Q_UNUSED(connectResult);

    connectResult = QObject::connect(mPrimaryDropDown, SIGNAL(selectedValueChanged(const QVariant)),
            this, SLOT(onSelectedValueChanged(const QVariant)));
    Q_ASSERT(connectResult);

    connectResult = QObject::connect(mPrimaryBaseDropDown, SIGNAL(selectedValueChanged(const QVariant)),
                this, SLOT(onSelectedValueChanged(const QVariant)));
    Q_ASSERT(connectResult);

    // Adds all the components to the scene
    topContainer->add(mPrimaryDropDown);
    topContainer->add(mPrimaryBaseDropDown);
    rootContainer->add(topContainer);
    root->setContent(rootContainer);

    Application::instance()->setScene(root);
}

void ApplicationUI::onSelectedValueChanged(const QVariant &selectedValue)
{
    // Sets the new brand color using the values from the dropdown
    Application::instance()->themeSupport()->setPrimaryColor(mPrimaryDropDown->selectedValue(), mPrimaryBaseDropDown->selectedValue());
    Q_UNUSED(selectedValue);
}
// The main.cpp file

#include "applicationui.hpp"

#include <bb/cascades/Application>

#include <QLocale>
#include <QTranslator>

#include <Qt/qdeclarativedebug.h>

using namespace bb::cascades;

Q_DECL_EXPORT int main(int argc, char **argv)
{
    Application app(argc, argv);
    ApplicationUI appui;
    return Application::exec();
}

UI palette

There are a few factors that determine what the UIPalette for an app looks like: the primary color, the primary base color, and visual style. The framework takes these items as input and generates an entire palette of colors that it uses for every visual component in the UI. Some of the palette values include text, textOnPlain, textOnPrimary, textPrimary, and more. The following image shows the places where the various palette values occur on a typical screen.

A set of screen shots showing how the different colors are used in the color palette.

The values of the primary and primary base colors that you set in the bar-descriptor.xml file might not actually match the values that you retrieve from the palette during runtime. The framework often tweaks the primary and primary base values to achieve the best appearance for the current visual style.

Binding to the UI palette

Although the framework handles everything related to palette generation, there are still instances where you might need to read the generated values (for example, if you have custom controls or icons that you want to be consistent with other UI components). To retrieve the palette, check the UIObject::ui property of any component within the current scope. This property specifies a UIConfig object that contains a UIPalette specifying the current color palette. One of the benefits of using QML with palettes is that after you bind an object's color to the palette, the object is updated automatically when the palette changes. However, C++ does not support property binding in the same way that QML does. In C++, you must connect to the paletteChanged() signal to listen for updates and update the objects manually.

The following example demonstrates how to retrieve the current palette and use its colors for several containers' backgrounds. When the theme changes, the containers are updated with the new palette colors. As you can see in the following image, the primary colors in this example don't change when the VisualStyle changes, because they contrast sufficiently with both Bright and Dark.

Screen shots showing the differences in how palette values appear between visual styles.
import bb.cascades 1.3

Page {
    id: root
    Container {
        layout: DockLayout {}
        Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            Container {
                background: ui.palette.primary
                Label {
                    text: "Primary " + Color.toHexString(ui.palette.primary).toUpperCase();
                }
            }                   
            Container {
                background: ui.palette.primaryBase
                Label {
                    text: "Primary Base " + Color.toHexString(ui.palette.primaryBase).toUpperCase();
                }
            }
            Container {
                background: ui.palette.primarySoft
                Label {
                    text: "Primary Soft " + Color.toHexString(ui.palette.primarySoft).toUpperCase();
                }
            }    
            Container {
                background: ui.palette.background
                Label {
                    text: "Background " + Color.toHexString(ui.palette.background).toUpperCase();
                }
            }
            Container {
                background: ui.palette.plain
                Label {
                    text: "Plain " + Color.toHexString(ui.palette.plain).toUpperCase();
                }
            }
            Container {
                background: ui.palette.plainBase
                Label {
                    text: "Plain Base" + Color.toHexString(ui.palette.plainBase).toUpperCase();
                }
            }
        }
        Button {
            verticalAlignment: VerticalAlignment.Bottom
            horizontalAlignment: HorizontalAlignment.Center
            text: "Switch theme"
            // Checks the current theme and then flips the value
            onClicked: {
                if (Application.themeSupport.theme.colorTheme.style == VisualStyle.Bright) {
                	Application.themeSupport.setVisualStyle(VisualStyle.Dark);
                }       
                else {
                    Application.themeSupport.setVisualStyle(VisualStyle.Bright);
                }
            }
        }
    }
}
#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_
#include <QObject>

namespace bb
{
    namespace cascades
    {
        class Button;
        class Color;
        class Container;
        class Label;
        class UIConfig;
        class UIPalette;

    }
}

class ApplicationUI : public QObject
{
    Q_OBJECT
public:
    ApplicationUI();
    virtual ~ApplicationUI() {}

private slots:
    /*
     * Triggered whenever the user taps a button to switch the theme.
     */
    void onButtonClicked();
    /*
     * Triggered whenever the palette changes so the app can
     * update any controls that use palette values.
     */
    void onPaletteChanged(const bb::cascades::UIPalette *palette);
private:
    /*
     * Converts a Color value into a hex string to display on labels.
     */
    QString colorToHexString(const bb::cascades::Color color);

    bb::cascades::UIConfig *ui;

    bb::cascades::Button* mButton;
    bb::cascades::Container *mPrimaryContainer;
    bb::cascades::Label *mPrimaryLabel;
    bb::cascades::Container *mPrimaryBaseContainer;
    bb::cascades::Label *mPrimaryBaseLabel;
    bb::cascades::Container *mPrimarySoftContainer;
    bb::cascades::Label *mPrimarySoftLabel;
    bb::cascades::Container *mBackgroundContainer;
    bb::cascades::Label *mPackgroundLabel;
    bb::cascades::Container *mPlainContainer;
    bb::cascades::Label *mPlainLabel;
    bb::cascades::Container *mPlainBaseContainer;
    bb::cascades::Label *mPlainBaseLabel;
};

#endif /* ApplicationUI_HPP_ */
#include "applicationui.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/Button>
#include <bb/cascades/Color>
#include <bb/cascades/ColorTheme>
#include <bb/cascades/Container>
#include <bb/cascades/DockLayout>
#include <bb/cascades/HorizontalAlignment>
#include <bb/cascades/Label>
#include <bb/cascades/Page>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/Theme>
#include <bb/cascades/ThemeSupport>
#include <bb/cascades/UIConfig>
#include <bb/cascades/UIPalette>
#include <bb/cascades/VerticalAlignment>
#include <bb/cascades/VisualStyle>

using namespace bb::cascades;

ApplicationUI::ApplicationUI() :
        QObject()
{
    Page *root = new Page();

    // Gets the UI palette from within the context of this page
    // and connects to its changed signal in order to listen for updates
    ui = root->ui();
    bool connectResult;
    Q_UNUSED(connectResult);
    connectResult = connect(ui, SIGNAL(paletteChanged(const bb::cascades::UIPalette*)),
            this, SLOT(onPaletteChanged(const bb::cascades::UIPalette*)));
    Q_ASSERT(connectResult);

    // Connects the button clicked signal to its handler which initiate theme changes
    mButton = Button::create().text("Switch theme");
    mButton->setHorizontalAlignment(HorizontalAlignment::Center);
    mButton->setVerticalAlignment(VerticalAlignment::Bottom);
    connectResult = connect(mButton, SIGNAL(clicked()), this, SLOT(onButtonClicked()));
    Q_ASSERT(connectResult);

    // Creates all the containers and labels, sets container backgrounds to palette
    // colors, and names the palette values in the labels
    Container *rootContainer = Container::create();
    rootContainer->setLayout(new DockLayout());

    Container *topContainer = Container::create();
    topContainer->setHorizontalAlignment(HorizontalAlignment::Center);
    topContainer->setVerticalAlignment(VerticalAlignment::Center);

    mPrimaryContainer = Container::create();
    mPrimaryLabel = Label::create().text("Primary " + colorToHexString(ui->palette()->primary()));
    mPrimaryContainer->setBackground(ui->palette()->primary());
    mPrimaryContainer->add(mPrimaryLabel);

    mPrimaryBaseContainer = Container::create();
    mPrimaryBaseLabel = Label::create().text("Primary Base " + colorToHexString(ui->palette()->primaryBase()));
    mPrimaryBaseContainer->setBackground(ui->palette()->primaryBase());
    mPrimaryBaseContainer->add(mPrimaryBaseLabel);

    mPrimarySoftContainer = Container::create();
    mPrimarySoftLabel = Label::create().text("Primary Soft " + colorToHexString(ui->palette()->primarySoft()));
    mPrimarySoftContainer->setBackground(ui->palette()->primarySoft());
    mPrimarySoftContainer->add(mPrimarySoftLabel);

    mBackgroundContainer = Container::create();
    mPackgroundLabel = Label::create().text("Background " + colorToHexString(ui->palette()->background()));
    mBackgroundContainer->setBackground(ui->palette()->background());
    mBackgroundContainer->add(mPackgroundLabel);

    mPlainContainer = Container::create();
    mPlainLabel = Label::create().text("Plain " + colorToHexString(ui->palette()->plain()));
    mPlainContainer->setBackground(ui->palette()->plain());
    mPlainContainer->add(mPlainLabel);

    mPlainBaseContainer = Container::create();
    mPlainBaseLabel = Label::create().text("Plain Base " + colorToHexString(ui->palette()->plainBase()));
    mPlainBaseContainer->setBackground(ui->palette()->plainBase());
    mPlainBaseContainer->add(mPlainBaseLabel);

    // Adds the components to the scene
    topContainer->add(mPrimaryContainer);
    topContainer->add(mPrimaryBaseContainer);
    topContainer->add(mPrimarySoftContainer);
    topContainer->add(mBackgroundContainer);
    topContainer->add(mPlainContainer);
    topContainer->add(mPlainBaseContainer);

    rootContainer->add(topContainer);
    rootContainer->add(mButton);

    root->setContent(rootContainer);
    Application::instance()->setScene(root);
}

void ApplicationUI::onButtonClicked()
{
    if (Application::instance()->themeSupport()->theme()->colorTheme()->style() == VisualStyle::Bright)
    {
        Application::instance()->themeSupport()->setVisualStyle(VisualStyle::Dark);
    }
    else
    {
        Application::instance()->themeSupport()->setVisualStyle(VisualStyle::Bright);
    }
}

void ApplicationUI::onPaletteChanged(const bb::cascades::UIPalette* palette)
{
    mPrimaryLabel->setText("Primary " + colorToHexString(palette->primary()));
    mPrimaryContainer->setBackground(palette->primary());
    mPrimaryBaseLabel->setText("Primary Base " + colorToHexString(palette->primaryBase()));
    mPrimaryBaseContainer->setBackground(palette->primaryBase());
    mPrimarySoftLabel->setText("Primary Soft " + colorToHexString(palette->primarySoft()));
    mPrimarySoftContainer->setBackground(palette->primarySoft());
    mPackgroundLabel->setText("Background " + colorToHexString(palette->background()));
    mBackgroundContainer->setBackground(palette->background());
    mPlainLabel->setText("Plain " + colorToHexString(palette->plain()));
    mPlainContainer->setBackground(palette->plain());
    mPlainBaseLabel->setText("Plain Base " + colorToHexString(palette->plainBase()));
    mPlainBaseContainer->setBackground(palette->plainBase());
}

QString ApplicationUI::colorToHexString(const Color color)
{
    QString colorString;
    QDebug(&colorString) << color;
    colorString = "#"+ colorString.mid(3, 8);
    return colorString.toUpper();
}
#include "applicationui.hpp"

#include <bb/cascades/Application>

#include <QLocale>
#include <QTranslator>

#include <Qt/qdeclarativedebug.h>

using namespace bb::cascades;

Q_DECL_EXPORT int main(int argc, char **argv)
{
    Application app(argc, argv);
    ApplicationUI appui;
    return Application::exec();
}

System default values

The Paints class gives you access to the default colors for text. This class is part of SystemDefaults, which lets you determine default values for various visual elements, such as color and text style. You can call SystemDefaults::Paints::defaultText() to retrieve the text color (as a ColorPaint object). The colors that you retrieve depend on the theme that your app uses, so you can use this function to determine the best colors for other visual components in your app.

ColorPaint *textColor = SystemDefaults::Paints::defaultText();

If you choose to use SystemDefaults::Paints to provide color for other components, you must be aware that the values do not update when the theme changes at runtime. In most cases, a better choice is to use the UiObject::ui property to access palette values.

Last modified: 2014-05-14



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus