Dynamic background color

You can easily create dynamic visual effects by changing the background color of your application. For example, for accessibility purposes, you can add a button that changes the background and font color to a high-contrast mode for visually impaired users.

There are two primary methods to achieve this: using Backgrounds or Data Binding.

Which Method Should You Use?

• Using Backgrounds is ideal for simple scenarios with a limited number of predefined color options.
• Data Binding offers more flexibility, especially when colors are determined by user input, external data, or complex conditions.

Here’s how to apply both techniques:

Method 1: Using Backgrounds

With backgrounds, you can define different visual states and switch between them based on interactions or triggers.

1. Select Your Project and Access Backgrounds

   • Go to the Backgrounds section in your project settings.

   Change the Background Color

   • Modify the current background color to your desired choice.

   Create a New Background

   • Add a new background and choose a different color.

   Set Up a Trigger

   • Choose a trigger element (e.g., a button) and assign the Change Background action to it.

Method 2: Using Data Binding

Data binding allows you to link screen properties (like background color) to a variable, enabling dynamic updates based on data changes.

1. Create a Variable

   • Go to the PandaSuite Database.
   • Click + Add Property and name it (e.g., bgColor). Set its type to Color.

2. Bind the Background Color

   • Select your screen.
   • In the Properties panel, find the Background Color property.
   • Click the data binding icon and link it to your bgColor variable.

3. Modify the Variable Dynamically

   • Use interactions to modify the bgColor variable.
   • For example, create a button with an interaction: Set Variable -> bgColor -> choose a new color.