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 :)"
       }
     }
   }
 }

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