How to Switch Light Or Dark Theme Color Using Power Apps Toggle Control?

While working with the Power Apps application, we might need to change the theme, such as dark or light mode, which will improve the app’s appearance. We can achieve this with the Power Apps toggle control.

In this article, I will explain how to switch light or dark theme color using Power Apps toggle control.

Switch Light Or Dark Theme Color Using Power Apps Toggle Control

Look at the example below; when I toggled to dark mode, the entire Power Apps screen theme changed to dark, and if I toggled to light mode, then again, the Power Apps screen theme changed.

Follow the steps below to achieve this!

First, design the Power Apps screen using containers, buttons, and other controls according to your requirements.

1. Add a toggle control to the Power Apps screen. In its OnChange property, provide the code below.

If(
    Self.Value, 
    Set(varTheme, "Dark"), 
    Set(varTheme, "Light")
)

The above condition creates a variable varTheme, assigning two values (Dark and Light) based on the toggle control value.

2. Also, provide the formulas below for the toggle control’s TrueText, FalseText, and Color properties.

TrueText =  "Dark Mode"
FalseText = "Light Mode"

Color =  If(
    varTheme = "Dark", 
    RGBA(255, 255, 255, 1),  // White text for Dark Mode
    RGBA(0, 0, 0, 1)         // Black text for Light Mode
)

Based on the varTheme variable values, the provided RGBA value color will applied to the color property of the toggle control.

3. Provide the code below to the Fill property of the screen.

If(
    varTheme = "Dark", 
    RGBA(30, 30, 30, 1),  // Dark Mode Background
    RGBA(255, 255, 255, 1) // Light Mode Background
)

Like above, if the varTheme value is Dark, RGBA(30, 30, 30, 1) will be applied to screen other wise RGBA(255, 255, 255, 1).

4. Provide the code on the Fill property of the Power Apps Container controls.

If(
    varTheme = "Dark", 
    RGBA(60, 60, 60, 1),   // Dark Gray for Dark Mode
    RGBA(200, 200, 200, 1) // Light Gray for Light Mode
)

5. Provide the code below for the Color property of the text labels.

If(
    varTheme = "Dark", 
    RGBA(255, 255, 255, 1),  // White text for Dark Mode
    RGBA(0, 0, 0, 1)         // Black text for Light Mode
)

Save changes, preview the app once, and click on the toggle control; the theme color of the Power Apps screen will change based on the mode.

I hope you understand how dark and light modes are implemented on the Power Apps application. If you are also trying to implement change themes, follow this article.

Also, you may like:

• 9 Useful Power Apps Form Validations Examples
• Best Way to Make a Text input As Hyperlink in Power Apps 
• Power Apps Loading Spinner – How to Use
• Create Multiple Tabs in Power Apps Form
• Power Apps Modern Text input Control
• Show Hide Power Apps Form Based On Gallery Selected Item