In this Article we will learn how Toggle button control to transits between Light and Dark Mode.
What Is a Toggle Button?
A toggle button is a button that you can click to change its state from one to another and back again. It is commonly used to control settings or preferences in user interfaces.
Why Use a Toggle Button?
Toggle buttons provide a simple way for users to make a binary choice. They are more space-efficient than using separate buttons for each state and provide clear visual feedback to the user.
When to Use a Toggle Button?
Toggle buttons are used when:
- You need to switch between two states, like on/off or show/hide.
- You need an easily understandable way for users to control a setting.
- The action has an immediate effect and doesn't require additional steps to confirm.
- The above image is my Login Screen and in my Login Screen I want to take a Button using that I can switch my Screen between Light and Dark Mode.
- So here I need to take a Toggle control, go to +Insert and select Toggle as shown in below Image.
- I am placing this Toggle Control on the Right side of the Login Screen as shown below Image.
- Now Save and run the App, when I just switch On and Off the button noting is affecting as shown below image.
- Here my screen color is not changing to Light and Dark mode, to change this first I need to take one Variable which will tell the Power App that when it needs to change the color of the screen.
- Here I am taking OnVisible Event and taking one Variable as UpdateContext as shown below image.
- These variables are specific to a screen, meaning they only exist and can be accessed within the screen they are created on.
- Created and assigned using the UpdateContext() function.
- Syntax: UpdateContext({variableName: value})
- So using the UpdateContext function I can create a Variable that is local to that Login Screen, So Update Context then I need to write the Variable name as AppMode, you can take any Variable name.
UpdateContext({var_appmode:"Light mode})" as shown in the below Image.
- After adding the Variable, then when I check and uncheck the value of the variable should be changed, to do that on Toggle button there we have two events that is called On Uncheck and on Check. as shown below image.
- So OnCheck event that means it is switch on that is Dark mode, here I need to set that Variable name Update Context, in the same way OnUncheck event set one more variable set it to Light mode. as shown in below Images.
- Now save and run the app, check it Switch Of and Switch On but color is not changing because I only change the value of the variable, here I need to change the Fill property color of the Screen also.
- Go the Login Screen and go to the Fill Property, now on Fill Property there is default color that is Sky Blue color, so I want when it Switch On it should be in black color if that button is Switch Off it should be normal color.
- To do this I need to check the variable value and based on that value either Light or Dark I am changing my Login Screen color, so I need to write condition on Fill Event