Sailfish OS
  • Info
  • User Experience
  • Cases
  • Community
  • Developers
  • Contact
  • Get Sailfish OS
Select Page

API Documentation

Documentation for developing SailfishOS applications
  • API Documentation
  • Libsailfishapp
  • Sailfish Silica
    • Documentation
    • Icon Reference
  • Sailfish Components
    • Sailfish Accounts
    • Sailfish Bluetooth
    • Sailfish Contacts
    • Sailfish Crypto
    • Sailfish Gallery
    • Sailfish Media
    • Sailfish Pickers
    • Sailfish Secrets
    • Sailfish Share
    • Sailfish Telephony
    • Sailfish Webview
    • Amber Web Authorization
    • Amber MPRIS
  • Nemo QML Plugins
    • Configuration
    • Contacts
    • D-Bus
    • Keepalive
    • Notifications
    • Thumbnailer
  • Sailfish Middleware
    • MDM Framework
    • MDM Policy Framework
    • User Manager Daemon

Contents

  • Public Types
  • Properties
  • Public Functions
  • Signals
  • Static Public Members
  • Detailed Description

Theme Class

Allows to access the theme properties, e.g. colors and sizes More...

Header: #include <silicatheme.h>
  • List of all members, including inherited members

Public Types

enum ColorScheme { LightOnDark, DarkOnLight }
enum PresenceMode { PresenceAvailable, PresenceAway, PresenceBusy, PresenceOffline }

Properties

  • buttonWidthExtraSmall : const qreal
  • buttonWidthLarge : const qreal
  • buttonWidthMedium : const qreal
  • buttonWidthSmall : const qreal
  • buttonWidthTiny : const qreal
  • colorScheme : const ColorScheme
  • coverSizeLarge : const QSize
  • coverSizeSmall : const QSize
  • darkPrimaryColor : const QColor
  • darkSecondaryColor : const QColor
  • errorColor : const QColor
  • flickDeceleration : const qreal
  • fontFamily : const QString
  • fontFamilyHeading : const QString
  • fontSizeExtraLarge : const int
  • fontSizeExtraLargeBase : const int
  • fontSizeExtraSmall : const int
  • fontSizeExtraSmallBase : const int
  • fontSizeHuge : const int
  • fontSizeHugeBase : const int
  • fontSizeLarge : const int
  • fontSizeLargeBase : const int
  • fontSizeMedium : const int
  • fontSizeMediumBase : const int
  • fontSizeSmall : const int
  • fontSizeSmallBase : const int
  • fontSizeTiny : const int
  • fontSizeTinyBase : const int
  • highlightBackgroundColor : const QColor
  • highlightBackgroundOpacity : const float
  • highlightColor : const QColor
  • highlightDimmerColor : const QColor
  • horizontalPageMargin : const qreal
  • iconSizeExtraLarge : const qreal
  • iconSizeExtraSmall : const qreal
  • iconSizeLarge : const qreal
  • iconSizeLauncher : const qreal
  • iconSizeMedium : const qreal
  • iconSizeSmall : const qreal
  • iconSizeSmallPlus : const qreal
  • itemSizeExtraLarge : const qreal
  • itemSizeExtraSmall : const qreal
  • itemSizeHuge : const qreal
  • itemSizeLarge : const qreal
  • itemSizeMedium : const qreal
  • itemSizeSmall : const qreal
  • lightPrimaryColor : const QColor
  • lightSecondaryColor : const QColor
  • maximumFlickVelocity : const qreal
  • opacityFaint : const qreal
  • opacityHigh : const qreal
  • opacityLow : const qreal
  • opacityOverlay : const qreal
  • overlayBackgroundColor : const QColor
  • paddingLarge : const qreal
  • paddingMedium : const qreal
  • paddingSmall : const qreal
  • pixelRatio : const qreal
  • primaryColor : const QColor
  • secondaryColor : const QColor
  • secondaryHighlightColor : const QColor
  • startDragDistance : const int

Public Functions

Theme(QObject *parent = 0)
~Theme()
qreal buttonWidthExtraSmall() const
qreal buttonWidthLarge() const
qreal buttonWidthMedium() const
qreal buttonWidthSmall() const
qreal buttonWidthTiny() const
ColorScheme colorScheme() const
QSize coverSizeLarge() const
QSize coverSizeSmall() const
QColor darkPrimaryColor() const
QColor darkSecondaryColor() const
qreal dp(qreal size) const
QColor errorColor() const
qreal flickDeceleration() const
QString fontFamily() const
QString fontFamilyHeading() const
int fontSizeExtraLarge() const
int fontSizeExtraLargeBase() const
int fontSizeExtraSmall() const
int fontSizeExtraSmallBase() const
int fontSizeHuge() const
int fontSizeHugeBase() const
int fontSizeLarge() const
int fontSizeLargeBase() const
int fontSizeMedium() const
int fontSizeMediumBase() const
int fontSizeSmall() const
int fontSizeSmallBase() const
int fontSizeTiny() const
int fontSizeTinyBase() const
QColor highlightBackgroundColor() const
float highlightBackgroundOpacity() const
QColor highlightColor() const
QColor highlightDimmerColor() const
QString highlightText(const QString &text, const QVariant &pattern, const QColor &color)
qreal horizontalPageMargin() const
QString iconForMimeType(QString mimeType) const
qreal iconSizeExtraLarge() const
qreal iconSizeExtraSmall() const
qreal iconSizeLarge() const
qreal iconSizeLauncher() const
qreal iconSizeMedium() const
qreal iconSizeSmall() const
qreal iconSizeSmallPlus() const
qreal itemSizeExtraLarge() const
qreal itemSizeExtraSmall() const
qreal itemSizeHuge() const
qreal itemSizeLarge() const
qreal itemSizeMedium() const
qreal itemSizeSmall() const
QColor lightPrimaryColor() const
QColor lightSecondaryColor() const
qreal maximumFlickVelocity() const
qreal opacityFaint() const
qreal opacityHigh() const
qreal opacityLow() const
qreal opacityOverlay() const
QColor overlayBackgroundColor() const
qreal paddingLarge() const
qreal paddingMedium() const
qreal paddingSmall() const
qreal pixelRatio() const
QColor presenceColor(PresenceMode presenceMode) const
QColor primaryColor() const
QColor rgba(QColor color, qreal opacity) const
QColor secondaryColor() const
QColor secondaryHighlightColor() const
int startDragDistance() const

Signals

void colorSchemeChanged()
void errorColorChanged()
void fontFamilyChanged()
void fontFamilyHeadingChanged()
void fontSizeExtraLargeChanged()
void fontSizeExtraSmallChanged()
void fontSizeHugeChanged()
void fontSizeLargeChanged()
void fontSizeMediumChanged()
void fontSizeSmallChanged()
void fontSizeTinyChanged()
void highlightBackgroundColorChanged()
void highlightColorChanged()
void highlightDimmerColorChanged()
void overlayBackgroundColorChanged()
void primaryColorChanged()
void secondaryColorChanged()
void secondaryHighlightColorChanged()

Static Public Members

QColor highlightBackgroundFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)
QColor highlightDimmerFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)
QColor highlightFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)
Theme *instance()
QColor secondaryHighlightFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)

Detailed Description

Allows to access the theme properties, e.g. colors and sizes

Member Type Documentation

enum Theme::ColorScheme

ConstantValueDescription
Theme::LightOnDark0Original ambience style with dark wallpaper and light app content
Theme::DarkOnLight1Light wallpaper and dark app content

enum Theme::PresenceMode

ConstantValueDescription
Theme::PresenceAvailable0color of the available presence status
Theme::PresenceAway1color of the away presence status
Theme::PresenceBusy2color of the busy presence status
Theme::PresenceOffline3color of the offline presence status

Property Documentation

buttonWidthExtraSmall : const qreal

Extra small button size. Three extra small buttons fit across a portrait screen.

Access functions:

qreal buttonWidthExtraSmall() const

buttonWidthLarge : const qreal

Large button size. Generally only one large button will fit across a portrait screen.

Access functions:

qreal buttonWidthLarge() const

buttonWidthMedium : const qreal

Medium button size.

Access functions:

qreal buttonWidthMedium() const

buttonWidthSmall : const qreal

(default) small button size. Two small buttons will fit across a portrait screen.

Access functions:

qreal buttonWidthSmall() const

buttonWidthTiny : const qreal

Default icon button width.

Access functions:

qreal buttonWidthTiny() const

colorScheme : const ColorScheme

Defined by the currently active Sailfish ambience. In the DarkOnLight color scheme the platform text and icons are painted in dark color on light background compared to the LightOnDark scheme with normal light content on top of the dark background.

Apps that use platform colors and icons don't need to worry about the color scheme, the explicit property is exposed so that any custom UI elements defined by the app can adapt to the underlying theme changes.

  • Theme.LightOnDark - original ambience style with dark wallpaper and light app content
  • Theme.DarkOnLight - light wallpaper and dark app content

Access functions:

ColorScheme colorScheme() const

Notifier signal:

void colorSchemeChanged()

coverSizeLarge : const QSize

Large application cover size

Access functions:

QSize coverSizeLarge() const

coverSizeSmall : const QSize

Small application cover size

Access functions:

QSize coverSizeSmall() const

darkPrimaryColor : const QColor

Primary color over always light content. See also colors on top of custom content.

Access functions:

QColor darkPrimaryColor() const

darkSecondaryColor : const QColor

Secondary color over always light content. See also colors on top of custom content.

Access functions:

QColor darkSecondaryColor() const

errorColor : const QColor

Used to indicate errors in components.

Access functions:

QColor errorColor() const

Notifier signal:

void errorColorChanged()

flickDeceleration : const qreal

Flick deceleration of Sailfish-style flickables.

You don't need to access this directly if your application uses Silica's own flickable types — that is, SilicaFlickable, SilicaListView, and SilicaGridView.

Access functions:

qreal flickDeceleration() const

fontFamily : const QString

The default font family.

Access functions:

QString fontFamily() const

Notifier signal:

void fontFamilyChanged()

fontFamilyHeading : const QString

Font family used to display heading text

Access functions:

QString fontFamilyHeading() const

Notifier signal:

void fontFamilyHeadingChanged()

fontSizeExtraLarge : const int

For large heading text, such as those of PageHeader and ViewPlaceholder.

Access functions:

int fontSizeExtraLarge() const

Notifier signal:

void fontSizeExtraLargeChanged()

fontSizeExtraLargeBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeExtraLargeBase() const

fontSizeExtraSmall : const int

For smaller secondary text, such as the description text in TextSwitch and ValueButton.

Access functions:

int fontSizeExtraSmall() const

Notifier signal:

void fontSizeExtraSmallChanged()

fontSizeExtraSmallBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeExtraSmallBase() const

fontSizeHuge : const int

For very large headings or UI components where the text dominates, such as in a keypad button.

Access functions:

int fontSizeHuge() const

Notifier signal:

void fontSizeHugeChanged()

fontSizeHugeBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeHugeBase() const

fontSizeLarge : const int

For large heading text, such as those of PageHeader and ViewPlaceholder.

Access functions:

int fontSizeLarge() const

Notifier signal:

void fontSizeLargeChanged()

fontSizeLargeBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeLargeBase() const

fontSizeMedium : const int

The most common text size; this is the default font size of Label and most UI controls.

Access functions:

int fontSizeMedium() const

Notifier signal:

void fontSizeMediumChanged()

fontSizeMediumBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeMediumBase() const

fontSizeSmall : const int

For general secondary text or paragraphs of non-interactive text.

Access functions:

int fontSizeSmall() const

Notifier signal:

void fontSizeSmallChanged()

fontSizeSmallBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeSmallBase() const

fontSizeTiny : const int

The smallest recommended font size; for use where space is severely restricted

Access functions:

int fontSizeTiny() const

Notifier signal:

void fontSizeTinyChanged()

fontSizeTinyBase : const int

Same as standard font size without "Base", but unaffected by user font size setting changes. Avoid using the base values if you can, in general they are only appropriate in rare cases where the space reserved for the label is seriously restricted and preferred strategies like wrapping would produce sub-optimal results.

Access functions:

int fontSizeTinyBase() const

highlightBackgroundColor : const QColor

This and highlightBackgroundOpacity properties hold standard colors for rendering a highlighted background according to the current Sailfish ambience.

Access functions:

QColor highlightBackgroundColor() const

Notifier signal:

void highlightBackgroundColorChanged()

highlightBackgroundOpacity : const float

Used to apply an appropriate opacity when painting the highlightBackgroundColor.

Access functions:

float highlightBackgroundOpacity() const

See also Theme::highlightBackgroundColor.

highlightColor : const QColor

Main color for non-interactive text and press highlights. See also coloring interactive content.

Access functions:

QColor highlightColor() const

Notifier signal:

void highlightColorChanged()

highlightDimmerColor : const QColor

Used to paint the highlight color with a darker shade (for example, when dimming a region to bring attention to other areas of the UI). See also coloring interactive content.

Access functions:

QColor highlightDimmerColor() const

Notifier signal:

void highlightDimmerColorChanged()

horizontalPageMargin : const qreal

Used between the page content and the left and right side of the display. This value is typically Theme.paddingLarge on smaller displays, e.g. phones, and can be wider on larger displays, e.g. tablets.

Margins on the left and right sides of the display should be set to Theme.horizontalPageMargin.

Access functions:

qreal horizontalPageMargin() const

iconSizeExtraLarge : const qreal

Suits very large icon displays. See also icon usage.

Access functions:

qreal iconSizeExtraLarge() const

iconSizeExtraSmall : const qreal

Suits smallest icons, such as those in the Home status area. See also icon usage.

Access functions:

qreal iconSizeExtraSmall() const

iconSizeLarge : const qreal

Suits larger icon displays and buttons. See also icon usage.

Access functions:

qreal iconSizeLarge() const

iconSizeLauncher : const qreal

For icons in the Home app grid. See also icon usage.

Access functions:

qreal iconSizeLauncher() const

iconSizeMedium : const qreal

The most common icon size; suits icons in small to medium-sized list items. See also icon usage.

Access functions:

qreal iconSizeMedium() const

iconSizeSmall : const qreal

Suits small icons, such as CoverAction icons and icons on the Events screen. See also icon usage.

Access functions:

qreal iconSizeSmall() const

iconSizeSmallPlus : const qreal

A larger variant of iconSizeSmall, used for notification icons. See also icon usage.

Access functions:

qreal iconSizeSmallPlus() const

itemSizeExtraLarge : const qreal

Suits larger items such as list delegates with an image thumbnail and associated image details

Access functions:

qreal itemSizeExtraLarge() const

itemSizeExtraSmall : const qreal

Suits the smallest UI controls; used as the height of buttons and pulley menu entries

Access functions:

qreal itemSizeExtraSmall() const

itemSizeHuge : const qreal

Suits larger items such as images in a fullscreen grid of thumbnail images

Access functions:

qreal itemSizeHuge() const

itemSizeLarge : const qreal

Suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation

Access functions:

qreal itemSizeLarge() const

itemSizeMedium : const qreal

Suits average-sized UI controls; used as the height of list items with two lines of text

Access functions:

qreal itemSizeMedium() const

itemSizeSmall : const qreal

Suits small UI controls; used as the height of list items with one line of text

Access functions:

qreal itemSizeSmall() const

lightPrimaryColor : const QColor

Primary color over always dark content. See also colors on top of custom content.

Access functions:

QColor lightPrimaryColor() const

lightSecondaryColor : const QColor

Secondary color over always dark content. See also colors on top of custom content.

Access functions:

QColor lightSecondaryColor() const

maximumFlickVelocity : const qreal

Maximum flick velocity of Sailfish-style flickables.

You don't need to access this directly if your application uses Silica's own flickable types — that is, SilicaFlickable, SilicaListView, and SilicaGridView.

Access functions:

qreal maximumFlickVelocity() const

opacityFaint : const qreal

Opacity used to render unavailable content, e.g. requiring installation. See also opacity usage.

Access functions:

qreal opacityFaint() const

opacityHigh : const qreal

Opacity used to render de-emphasized content. See also opacity usage.

Access functions:

qreal opacityHigh() const

opacityLow : const qreal

Opacity used to render disabled content. See also opacity usage.

Access functions:

qreal opacityLow() const

opacityOverlay : const qreal

Opacity used to render overlay content. See also opacity usage.

Access functions:

qreal opacityOverlay() const

overlayBackgroundColor : const QColor

Background color of system dialogs opened on top of the application.

Access functions:

QColor overlayBackgroundColor() const

Notifier signal:

void overlayBackgroundColorChanged()

paddingLarge : const qreal

Commonly used to divide UI components, particularly as the vertical spacing between components in a Column

Access functions:

qreal paddingLarge() const

paddingMedium : const qreal

Commonly used to separate related UI components without visually disassocating them

Access functions:

qreal paddingMedium() const

paddingSmall : const qreal

commonly used to separate UI components by a slight margin, particularly in space-restricted areas

Access functions:

qreal paddingSmall() const

pixelRatio : const qreal

Can be used to scale custom layout parameters to the target resolution. In most cases custom layout parameters should be avoided; instead, base your application layouts on the platform size and padding parameters exposed through the Theme object.

Access functions:

qreal pixelRatio() const

primaryColor : const QColor

Adds emphasis to active areas of the UI. See also coloring interactive content.

Access functions:

QColor primaryColor() const

Notifier signal:

void primaryColorChanged()

secondaryColor : const QColor

Used to paint less prominent parts of the UI. See also coloring interactive content.

Access functions:

QColor secondaryColor() const

Notifier signal:

void secondaryColorChanged()

secondaryHighlightColor : const QColor

Used to paint less prominent parts of the UI in a highlighted manner. See also coloring interactive content.

Access functions:

QColor secondaryHighlightColor() const

Notifier signal:

void secondaryHighlightColorChanged()

startDragDistance : const int

This property holds the distance a touch must move before the action will be considered a move.

Access functions:

int startDragDistance() const

Member Function Documentation

Theme::Theme(QObject *parent = 0)

Default constructs an instance of Theme.

Theme::~Theme()

Destroys the instance of Theme.

qreal Theme::dp(qreal size) const

Takes device-independent pixel value and returns it in respective display-specific pixels. Equivalent of multiplying the input value with Theme.pixelRatio.

size value to multiply

[static] QColor Theme::highlightBackgroundFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)

Returns a highlight background color derived from a reference color and color scheme.

[static] QColor Theme::highlightDimmerFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)

Returns a highlight dimmer color derived from a reference color and color scheme.

[static] QColor Theme::highlightFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)

Returns a highlight color derived from a reference color and color scheme.

QString Theme::highlightText(const QString &text, const QVariant &pattern, const QColor &color)

Searches for pattern in text and sets the color of the text.

Returns a styled text string with highlighted matches and original text escaped.

QString Theme::iconForMimeType(QString mimeType) const

Returns an icon representing the mimeType.

[static] Theme *Theme::instance()

Returns a singleton Theme instance

QColor Theme::presenceColor(PresenceMode presenceMode) const

Returns the presence color of the given presenceMode.

The presenceMode parameter may be one of:

  • Theme.PresenceAvailable - color of the available presence status
  • Theme.PresenceAway - color of the away presence status
  • Theme.PresenceBusy - color of the busy presence status
  • Theme.PresenceOffline - color of the offline presence status

QColor Theme::rgba(QColor color, qreal opacity) const

Returns RGBA color with given color and alpha channel opacity. The opacity can have values between 0.0 and 1.0.

[static] QColor Theme::secondaryHighlightFromColor(const QColor &color, Silica::Theme::ColorScheme scheme)

Returns a secondary highlight color derived from a reference color and color scheme.

  • Legal
  • Contact Us
  • Jolla Mobile Ltd © 2025

  • Facebook
  • Twitter
  • Mastodon
  • YouTube
  • LinkedIn