Style Your App with Themes

V-Play allows you to style your app with app-wide theme settings using the Theme component. This is in most cases more convenient than styling every single component itself in your code.

Change Theme Colors of Your App

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   onInitTheme: {
     // Set the navigation bar background to blue
     Theme.navigationBar.backgroundColor = "blue"

     // Set the global text color to red
     Theme.colors.textColor = "red"
   }

   NavigationStack {

     Page {
       title: "Hello V-Play"

       AppText {
         anchors.centerIn: parent
         text: "Hi :)"
       }
     }
   }
 }

Change Status Bar Style for a Dark Theme

This example applies dark theme settings. The navigation bar background is set to black. In order to see the device status bar, it is set to white (light) style.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   onInitTheme: {
     // Set the status bar style to white (light style)
     Theme.colors.statusBarStyle = Theme.colors.statusBarStyleWhite

     // Set the navigation bar background to blue
     Theme.navigationBar.backgroundColor = "black"
     Theme.navigationBar.titleColor = "white"
     Theme.navigationBar.dividerColor = "black"

     // Set the background color, which is used as background color of pages
     Theme.colors.backgroundColor = "#222"

     // Set the global text color to white
     Theme.colors.textColor = "white"
   }

   // Displays a title bar and is used for navigation between pages
   NavigationStack {

     Page {
       title: "Hello V-Play" // Is displayed in the title bar

       AppText {
         anchors.centerIn: parent
         text: "Hi :)"
       }
     }
   }
 }

How do I change the used platform theme of my app?

The default Theme settings implement platform-specific styles, like the default iOS style on iOS or Material Style on Android, for a native look and feel on both platforms. The following example shows how to manually change the used platform theme in your code:

 import VPlayApps 1.0

 App {

   Navigation {
     NavigationItem {
       title: "Main"
       icon: IconType.heart

       NavigationStack {
         Page {
           title: "Main Page"
           AppButton {
             text: "Switch Theme"
             onClicked: Theme.platform = (Theme.platform === "android") ? "ios" : "android"
             anchors.centerIn: parent

           }
         }
       }
     }

     NavigationItem {
       title: "Second"
       icon: IconType.thlarge

       NavigationStack {
         Page {  title: "Second Page" }
       }
     }
   }
 }

How do I set an app-wide custom font?

V-Play components make use of two different fonts, the Theme::normalFont and the Theme::boldFont. By default, these fonts match the platform's default font for V-Play Apps components.

If you want to explicitly provide your own font you can override the Theme properties with a FontLoader object:

 import VPlayApps 1.0
 import QtQuick 2.5

 App {

   // initialize theme with new font
   onInitTheme: {
     Theme.normalFont = arialFont
   }

   // load new font with FontLoader
   FontLoader {
     id: arialFont
     source: "../assets/fonts/Arial.ttf" // loaded from your assets folder
   }

   Page {
     // V-Play components like AppText automatically use the Theme fonts
     AppText {
       text: "I'm in Arial"
     }
   }
 }

Make sure to add your custom fonts to your app's assets and to provide the correct path in the FontLoader object. You can also use the custom font in your own app components, like the following example:

 Text {
   // Set reference to the global app font
   font.family: Theme.normalFont.name

   text: "Custom text item"
 }

Instead of replacing the general Theme font, you can also use a FontLoader and only overwrite the font.family property for certain text items.

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support