API Documentation

Documentation for developing SailfishOS applications

Theme QML Type

Provides Sailfish styling properties More...

Import Statement: import Sailfish.Silica 1.0

Properties

Methods

Detailed Description

The Theme object provides common style information to the Sailfish applications and UI components like colors, fonts and margins. This is a singleton object; the Theme type cannot be instantiated.

Theme is used to apply standard Sailfish colors, fonts, sizes, margins and other look and feel characteristics to your UI. The colors change according to the current Sailfish ambience, and the sizes and margins scale according to the platform screen size and resolution, so Theme should always be used where possible in preference to hard-coded values.

For instance, Theme.horizontalPageMargin provides a standard-sized margin between the left and right edges of the page and its content. Below, this margin is applied to both sides of a label so it does not align flush with the page edges:

 Page {
     Label {
         text: "Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio."
         color: Theme.highlightColor
         x: Theme.horizontalPageMargin
         width: parent.width - x*2   // apply left edge margin to right side also
         font.pixelSize: Theme.fontSizeSmall
         wrapMode: Text.Wrap
     }
 }

Or, if using a simple QtQuick Text item rather than a Silica Label, Theme can be used to give the text item the default Label text color and font values:

 Text {
     color: Theme.primaryColor
     font.family: Theme.fontFamily
     font.pixelSize: Theme.fontSizeMedium
 }

Applying Sailfish-style coloring

In Sailfish OS, the contents of interactive controls are colored differently to give a visual indication to the user when a control is pressed. Sailfish apps should color their UI components in a similar manner using the Theme object.

Coloring non-interactive content

When displaying text that does not respond to press interaction, the text is colored with Theme.highlightColor, or Theme.secondaryHighlightColor for secondary text.

For example:

 Page {
     Column {
         x: Theme.horizontalPageMargin
         width: parent.width - x*2   // apply left edge margin to right edge also

         Label {
             text: "File: sailfish_os_wallpaper.jpg"
             color: Theme.highlightColor     // color main text
         }
         Label {
             text: "Created November 23, 2012"
             color: Theme.secondaryHighlightColor    // color secondary text
             font.pixelSize: Theme.fontSizeExtraSmall
         }
     }
 }

Coloring content in interactive controls

When text is displayed in a control that responds to press interaction — for example in a pressable control like a ListItem, Button or MouseArea — it is colored with Theme.primaryColor, or Theme.secondaryColor for secondary text. When the control is pressed, the text changes to Theme.highlightColor, or Theme.secondaryHighlightColor for secondary text. Also, the background of the control is colored with Theme.highlightBackgroundColor with an opacity of Theme.highlightBackgroundOpacity.

When creating interactive UI controls, always use BackgroundItem and ListItem if possible, as they automatically highlight their backgrounds when pressed and have a highlighted property that is true when their content should be styled in this state.

The example below binds to highlighted to color text appropriately within a ListItem control:

 ListItem {
     id: listItem
     width: parent.width
     contentHeight: Theme.itemSizeMedium

     Column {
         x: Theme.horizontalPageMargin
         width: parent.width - x*2
         anchors.verticalCenter: parent.verticalCenter

         Label {
             text: "File: sailfish_os_wallpaper.jpg"
             color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor  // update color
         }
         Label {
             text: "Created November 23, 2012"
             color: listItem.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor  // update color
             font.pixelSize: Theme.fontSizeExtraSmall
         }
     }

     onClicked: {
         // trigger action, e.g. open the file
     }
 }

When using your own custom MouseArea controls, the BackgroundItem and ListItem behavior can be mimicked by binding to MouseArea's pressed and containsMouse properties. For instance, the ListItem in the previous example could be replaced by:

 MouseArea {
     id: mouseArea

     property bool highlighted: pressed && containsMouse

     width: parent.width
     height: Theme.itemSizeSmall

     Rectangle {
         anchors.fill: parent
         color: mouseArea.highlighted
                ? Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
                : "transparent"
     }

     // Column { ... }
 }

This doesn't exactly replicate the BackgroundItem and ListItem behavior as those controls have have slightly delayed coloring changes and other subtle differences, and ListItem also sets highlighted to true when its menu is open, so it's best to build on those Silica types where possible.

Sizing list items and their contents

A common application UI pattern is to show a list of items, where each item comprises of one or more lines of text, possibly accompanied by an icon on the left. In Sailfish OS, apps should use the Theme object to size these components in a standard manner.

If the list item displays one line of text:

If the list item displays two lines of text:

For example, below is a list item with an icon and two lines of text, appropriately sized:

 ListItem {
     id: listItem
     width: parent.width
     contentHeight: Theme.itemSizeMedium

     Image {
         id: icon
         x: Theme.horizontalPageMargin
         source: "file:///path/to/icon.png"
         anchors.verticalCenter: parent.verticalCenter
         sourceSize.width: Theme.iconSizeMedium
         sourceSize.height: Theme.iconSizeMedium
     }

     Column {
         anchors {
             left: icon.right; leftMargin: Theme.paddingLarge
             right: parent.right; rightMargin: Theme.horizontalPageMargin
             verticalCenter: parent.verticalCenter
         }

         Label {
             text: "Important email"
             color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor
         }
         Label {
             text: "Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio."
             color: listItem.highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
             font.pixelSize: Theme.fontSizeExtraSmall
             width: parent.width
             truncationMode: TruncationMode.Fade
         }
     }
 }

For items that show more than two lines of text, the pattern is similar: use larger icon and possibly font sizes, color non-significant text with secondary colors, and separate the icon and text with Theme.paddingLarge.

See also Common Pitfalls in Sailfish Application Development.

Property Documentation

buttonWidthExtraSmall : real

These properties hold standard button widths:

  • Theme.buttonWidthExtraSmall - Extra small button size. Three extra small buttons fit across a portrait screen.
  • Theme.buttonWidthSmall - (default) small button size. Two small buttons will fit across a portrait screen.
  • Theme.buttonWidthMedium - medium button size.
  • Theme.buttonWidthLarge - large button size. Generally only one large button will fit across a portrait screen.

See also Button::preferredWidth.


buttonWidthLarge : real

These properties hold standard button widths:

  • Theme.buttonWidthExtraSmall - Extra small button size. Three extra small buttons fit across a portrait screen.
  • Theme.buttonWidthSmall - (default) small button size. Two small buttons will fit across a portrait screen.
  • Theme.buttonWidthMedium - medium button size.
  • Theme.buttonWidthLarge - large button size. Generally only one large button will fit across a portrait screen.

See also Button::preferredWidth.


buttonWidthMedium : real

These properties hold standard button widths:

  • Theme.buttonWidthExtraSmall - Extra small button size. Three extra small buttons fit across a portrait screen.
  • Theme.buttonWidthSmall - (default) small button size. Two small buttons will fit across a portrait screen.
  • Theme.buttonWidthMedium - medium button size.
  • Theme.buttonWidthLarge - large button size. Generally only one large button will fit across a portrait screen.

See also Button::preferredWidth.


buttonWidthSmall : real

These properties hold standard button widths:

  • Theme.buttonWidthExtraSmall - Extra small button size. Three extra small buttons fit across a portrait screen.
  • Theme.buttonWidthSmall - (default) small button size. Two small buttons will fit across a portrait screen.
  • Theme.buttonWidthMedium - medium button size.
  • Theme.buttonWidthLarge - large button size. Generally only one large button will fit across a portrait screen.

See also Button::preferredWidth.


colorScheme : enumeration

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 - new style introduced in Sailfish 3 with light wallpaper and dark app content

coverSizeLarge : QSize

These properties hold application cover standard sizes:

  • Theme.coverSizeSmall - small application cover size
  • Theme.coverSizeLarge - large application cover size

coverSizeSmall : QSize

These properties hold application cover standard sizes:

  • Theme.coverSizeSmall - small application cover size
  • Theme.coverSizeLarge - large application cover size

darkPrimaryColor : color

Primary and secondary color are defined by the active ambience, and have been optimized to work with the respective ambience wallpaper. Using the default Theme.primaryColor and Theme.secondaryColor may not be appropriate if the app view uses custom background. If the app uses light background (e.g. text document) Theme.darkPrimaryColor and Theme.darkSecondaryColor are recommended instead. If the app uses dark background (e.g. video player) Theme.lightPrimaryColor and Theme.lightSecondaryColor are recommended.


darkSecondaryColor : color

Primary and secondary color are defined by the active ambience, and have been optimized to work with the respective ambience wallpaper. Using the default Theme.primaryColor and Theme.secondaryColor may not be appropriate if the app view uses custom background. If the app uses light background (e.g. text document) Theme.darkPrimaryColor and Theme.darkSecondaryColor are recommended instead. If the app uses dark background (e.g. video player) Theme.lightPrimaryColor and Theme.lightSecondaryColor are recommended.


errorColor : color

Used to indicate errors in components.


flickDeceleration : real

These properties hold resolution-independent platform-style flicking parameters. You don't need to access these directly if your application uses Silica's own flickable types — that is, SilicaFlickable, SilicaListView, SilicaGridView and SilicaWebView.

  • Theme.flickDeceleration - Flick deceleration of Sailfish-style flickables.
  • Theme.maximumFlickVelocity - Maximum flick velocity of Sailfish-style flickables.

fontFamily : string

Two standard fonts are used in the Sailfish UI:

  • Theme.fontFamily - the default font
  • Theme.fontFamilyHeading - used to display heading text

fontFamilyHeading : string

Two standard fonts are used in the Sailfish UI:

  • Theme.fontFamily - the default font
  • Theme.fontFamilyHeading - used to display heading text

fontSizeExtraLarge : int

These properties hold standard font sizes:

  • Theme.fontSizeTiny - the smallest recommended font size; for use where space is severely restricted
  • Theme.fontSizeExtraSmall - for smaller secondary text, such as the description text in TextSwitch and ValueButton
  • Theme.fontSizeSmall - for general secondary text or paragraphs of non-interactive text
  • Theme.fontSizeMedium - the most common text size; this is the default font size of Label and most UI controls
  • Theme.fontSizeLarge - for large heading text, such as those of PageHeader and ViewPlaceholder
  • Theme.fontSizeExtraLarge - for larger heading text
  • Theme.fontSizeHuge - for very large headings or UI components where the text dominates, such as in a keypad button

fontSizeExtraLargeBase : int

These properties hold base values of standard font size, which are 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.


fontSizeExtraSmall : int

These properties hold standard font sizes:

  • Theme.fontSizeTiny - the smallest recommended font size; for use where space is severely restricted
  • Theme.fontSizeExtraSmall - for smaller secondary text, such as the description text in TextSwitch and ValueButton
  • Theme.fontSizeSmall - for general secondary text or paragraphs of non-interactive text
  • Theme.fontSizeMedium - the most common text size; this is the default font size of Label and most UI controls
  • Theme.fontSizeLarge - for large heading text, such as those of PageHeader and ViewPlaceholder
  • Theme.fontSizeExtraLarge - for larger heading text
  • Theme.fontSizeHuge - for very large headings or UI components where the text dominates, such as in a keypad button

fontSizeExtraSmallBase : int

These properties hold base values of standard font size, which are 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.


fontSizeHuge : int

These properties hold standard font sizes:


fontSizeHugeBase : int

These properties hold base values of standard font size, which are 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.


fontSizeLarge : int

These properties hold standard font sizes:


fontSizeLargeBase : int

These properties hold base values of standard font size, which are 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.


fontSizeMedium : int

These properties hold standard font sizes:


fontSizeMediumBase : int

These properties hold base values of standard font size, which are 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.


fontSizeSmall : int

These properties hold standard font sizes:


fontSizeSmallBase : int

These properties hold base values of standard font size, which are 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.


fontSizeTiny : int

These properties hold standard font sizes:


fontSizeTinyBase : int

These properties hold base values of standard font size, which are 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.


highlightBackgroundColor : color

These properties hold standard colors for rendering a highlighted background according to the current Sailfish ambience:

  • Theme.highlightBackgroundColor - used to paint the background behind highlighted text
  • Theme.highlightBackgroundOpacity - used to apply an appropriate opacity when painting the highlightBackgroundColor

The opacity is typically applied to the color using rgba():

 MouseArea {
     id: mouseArea
     anchors.fill: parent

     Rectangle {
         anchors.fill: parent
         color: mouseArea.pressed && mouseArea.containsMouse
                ? Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
                : "transparent"
     }
 }

(This avoids having to set the rectangle's opacity separately, which would additionally be problematic if the rectangle had children that should not have the opacity applied.)


highlightBackgroundOpacity : color

These properties hold standard colors for rendering a highlighted background according to the current Sailfish ambience:

The opacity is typically applied to the color using rgba():

 MouseArea {
     id: mouseArea
     anchors.fill: parent

     Rectangle {
         anchors.fill: parent
         color: mouseArea.pressed && mouseArea.containsMouse
                ? Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
                : "transparent"
     }
 }

(This avoids having to set the rectangle's opacity separately, which would additionally be problematic if the rectangle had children that should not have the opacity applied.)


highlightColor : color

These properties hold standard colors according to the current Sailfish ambience:

  • Theme.primaryColor - adds emphasis to active areas of the UI
  • Theme.secondaryColor - used to paint less prominent parts of the UI
  • Theme.highlightColor - main color for non-interactive text and press highlights
  • Theme.secondaryHighlightColor - used to paint less prominent parts of the UI in a highlighted manner
  • Theme.highlightDimmerColor - 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)

"Secondary" information can refer to any text or icons that gives optional or additional information and as such do not need to receive the primary user attention. For example, the TextField placeholder text is colored with Theme.secondaryColor (and its highlighted counterpart when the field receives focus).


highlightDimmerColor : color

These properties hold standard colors according to the current Sailfish ambience:

  • Theme.primaryColor - adds emphasis to active areas of the UI
  • Theme.secondaryColor - used to paint less prominent parts of the UI
  • Theme.highlightColor - main color for non-interactive text and press highlights
  • Theme.secondaryHighlightColor - used to paint less prominent parts of the UI in a highlighted manner
  • Theme.highlightDimmerColor - 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)

"Secondary" information can refer to any text or icons that gives optional or additional information and as such do not need to receive the primary user attention. For example, the TextField placeholder text is colored with Theme.secondaryColor (and its highlighted counterpart when the field receives focus).


horizontalPageMargin : real

These properties hold standard margins:

  • Theme.paddingSmall - commonly used to separate UI components by a slight margin, particularly in space-restricted areas
  • Theme.paddingMedium - commonly used to separate related UI components without visually disassocating them
  • Theme.paddingLarge - commonly used to divide UI components, particularly as the vertical spacing between components in a Column
  • Theme.horizontalPageMargin - 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.


iconSizeExtraLarge : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeExtraSmall : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeLarge : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeLauncher : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeMedium : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeSmall : real

These properties hold standard icon sizes:

  • Theme.iconSizeExtraSmall - suits the smallest icons, such as those in the Home status area
  • Theme.iconSizeSmall - suits small icons, such as CoverAction icons and icons on the Events screen
  • Theme.iconSizeSmallPlus - a larger variant of iconSizeSmall, used for notification icons
  • Theme.iconSizeMedium - the most common icon size; suits icons in small to medium-sized list items
  • Theme.iconSizeLarge - suits larger icon displays and buttons
  • Theme.iconSizeExtraLarge - suits very large icon displays
  • Theme.iconSizeLauncher - for icons in the Home app grid

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

iconSizeSmallPlus : real

These properties hold standard icon sizes:

Platform icons accessed with the syntax "image://theme/icon-[s/m/l]-iconname" also follow these icon sizes. Small icons start with prefix "icon-s-", medium icons with prefix "icon-m-" and large icons with prefix "icon-l-".

All monochromatic icons should be colored appropriately, with the same coloring styles for text described in Applying Sailfish-style coloring. To color monochromatic platform icons, add "?<color>" to the end of the URI:

 ListItem {
     id: listItem
     width: parent.width
     height: Theme.itemSizeSmall

     Image {
         source: "image://theme/icon-s-iconname"
             + (listItem.highlighted ? "?" + Theme.highlightColor : "")
     }
 }

itemSizeExtraLarge : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

itemSizeExtraSmall : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

itemSizeHuge : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

itemSizeLarge : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

itemSizeMedium : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

itemSizeSmall : real

These properties hold standard item sizes:

  • Theme.itemSizeExtraSmall - suits the smallest UI controls; used as the height of buttons and pulley menu entries
  • Theme.itemSizeSmall - suits small UI controls; used as the height of list items with one line of text
  • Theme.itemSizeMedium - suits average-sized UI controls; used as the height of list items with two lines of text
  • Theme.itemSizeLarge - suits controls with several lines of text or more prominent text; this is the height of a page header in portrait orientation
  • Theme.itemSizeExtraLarge - suits larger items such as list delegates with an image thumbnail and associated image details
  • Theme.itemSizeHuge - suits larger items such as images in a fullscreen grid of thumbnail images

lightPrimaryColor : color

Primary and secondary color are defined by the active ambience, and have been optimized to work with the respective ambience wallpaper. Using the default Theme.primaryColor and Theme.secondaryColor may not be appropriate if the app view uses custom background. If the app uses light background (e.g. text document) Theme.darkPrimaryColor and Theme.darkSecondaryColor are recommended instead. If the app uses dark background (e.g. video player) Theme.lightPrimaryColor and Theme.lightSecondaryColor are recommended.


lightSecondaryColor : color

Primary and secondary color are defined by the active ambience, and have been optimized to work with the respective ambience wallpaper. Using the default Theme.primaryColor and Theme.secondaryColor may not be appropriate if the app view uses custom background. If the app uses light background (e.g. text document) Theme.darkPrimaryColor and Theme.darkSecondaryColor are recommended instead. If the app uses dark background (e.g. video player) Theme.lightPrimaryColor and Theme.lightSecondaryColor are recommended.


maximumFlickVelocity : real

These properties hold resolution-independent platform-style flicking parameters. You don't need to access these directly if your application uses Silica's own flickable types — that is, SilicaFlickable, SilicaListView, SilicaGridView and SilicaWebView.

  • Theme.flickDeceleration - Flick deceleration of Sailfish-style flickables.
  • Theme.maximumFlickVelocity - Maximum flick velocity of Sailfish-style flickables.

overlayBackgroundColor : color

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


paddingLarge : real

These properties hold standard margins:

  • Theme.paddingSmall - commonly used to separate UI components by a slight margin, particularly in space-restricted areas
  • Theme.paddingMedium - commonly used to separate related UI components without visually disassocating them
  • Theme.paddingLarge - commonly used to divide UI components, particularly as the vertical spacing between components in a Column
  • Theme.horizontalPageMargin - 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.


paddingMedium : real

These properties hold standard margins:

  • Theme.paddingSmall - commonly used to separate UI components by a slight margin, particularly in space-restricted areas
  • Theme.paddingMedium - commonly used to separate related UI components without visually disassocating them
  • Theme.paddingLarge - commonly used to divide UI components, particularly as the vertical spacing between components in a Column
  • Theme.horizontalPageMargin - 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.


paddingSmall : real

These properties hold standard margins:

  • Theme.paddingSmall - commonly used to separate UI components by a slight margin, particularly in space-restricted areas
  • Theme.paddingMedium - commonly used to separate related UI components without visually disassocating them
  • Theme.paddingLarge - commonly used to divide UI components, particularly as the vertical spacing between components in a Column
  • Theme.horizontalPageMargin - 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.


pixelRatio : real

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.


primaryColor : color

These properties hold standard colors according to the current Sailfish ambience:

  • Theme.primaryColor - adds emphasis to active areas of the UI
  • Theme.secondaryColor - used to paint less prominent parts of the UI
  • Theme.highlightColor - main color for non-interactive text and press highlights
  • Theme.secondaryHighlightColor - used to paint less prominent parts of the UI in a highlighted manner
  • Theme.highlightDimmerColor - 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)

"Secondary" information can refer to any text or icons that gives optional or additional information and as such do not need to receive the primary user attention. For example, the TextField placeholder text is colored with Theme.secondaryColor (and its highlighted counterpart when the field receives focus).


secondaryColor : color

These properties hold standard colors according to the current Sailfish ambience:

  • Theme.primaryColor - adds emphasis to active areas of the UI
  • Theme.secondaryColor - used to paint less prominent parts of the UI
  • Theme.highlightColor - main color for non-interactive text and press highlights
  • Theme.secondaryHighlightColor - used to paint less prominent parts of the UI in a highlighted manner
  • Theme.highlightDimmerColor - 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)

"Secondary" information can refer to any text or icons that gives optional or additional information and as such do not need to receive the primary user attention. For example, the TextField placeholder text is colored with Theme.secondaryColor (and its highlighted counterpart when the field receives focus).


secondaryHighlightColor : color

These properties hold standard colors according to the current Sailfish ambience:

  • Theme.primaryColor - adds emphasis to active areas of the UI
  • Theme.secondaryColor - used to paint less prominent parts of the UI
  • Theme.highlightColor - main color for non-interactive text and press highlights
  • Theme.secondaryHighlightColor - used to paint less prominent parts of the UI in a highlighted manner
  • Theme.highlightDimmerColor - 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)

"Secondary" information can refer to any text or icons that gives optional or additional information and as such do not need to receive the primary user attention. For example, the TextField placeholder text is colored with Theme.secondaryColor (and its highlighted counterpart when the field receives focus).


startDragDistance : int

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


Method Documentation

color highlightBackgroundFromColor(color, scheme)

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


color highlightDimmerFromColor(color, scheme)

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


color highlightFromColor(color, scheme)

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


highlightText(text, pattern, 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.


string iconForMimeType(string mimeType)

Returns an icon representing the mimeType.

 Image {
     source: Theme.iconForMimeType("text/vcard")
 }

The icon is one of image://theme/icon-m-file-

  • apk
  • audio
  • formatted
  • image
  • note
  • pdf
  • other
  • presentation
  • rpm
  • spreadsheet
  • vcard
  • video
  • folder

If no suitable icon is found "image://theme/icon-m-file-other" is returned.


color presenceColor(enumeration presenceMode)

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

color rgba(color, opacity)

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


color secondaryHighlightFromColor(color, scheme)

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


We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.