Adding theme feature to your app
It's truly surprising how easy it is to implement theme in a PowerShell app. It may sound like there's a lot to tweak and configure, but the truth is that almost everything is ready for you to start using it.
There are basically three parameters to work with:
1. The primary color, which is the one that most of your controls will have
2. The Secondary color (also called Accent color), that will be used for
outstanding controls like error buttons, error captions etc.
3. The theme mode. Either dark or light mode.
For theme implementation, you will use the 'CommonTheme.ps1' file (it will be added as dot sourcing). You can download this file plus the three example13 files and 'CommonFunctions.ps1' from my GitHub repo.
CommonTheme.ps1 file contains both sorted arrays for Primary and Secondary colors. They are being extracted from the MaterialDesignColors.dll file.
In addition, it contains two functions we will use in our example, Set-Theme and Get-ThemeMode. Set-Theme will change the three parameters we discussed earlier. You can set any one of them by providing the relevant parameter.
Get-ThemeMode will return either 'dark' or 'light' for the current app window.
For retrieving and saving user's favorite theme, we will use an xml file named Example13.config (the "config" extension means nothing. It is an xml file).
We start by reading the settings and set the theme accordingly.
I chose to place the theme configuration area at the bottom of the left drawer. This real-estate is hardly in use, and I think it looks cool over there.
So I'm populating the popups with the two color arrays, a toggle button for the mode and two buttons for saving new settings and undoing.
That's it. Unbelievably easy.
Take a look at the four events for all of the theme controls. By looking at the code, you'll understand everything. It's straight forward.
The Dark-Light toggle button will switch between the modes by using the Set-Theme function with 'Window' and 'ThemeMode' parameter only.
Both Primary and Secondary popup selections will set the colors, again by using the Set-Theme function with relevant parameters. Note that I am checking if the event triggered by a user clicking the mouse. The reason I'm doing it is because when we are populating the lists it might trigger the 'SelectionChanged' event, so we need to make sure it triggers only when needed.
The undo click event just reads the parameters' values from the config file and use them with, you guessed it, Set-Theme function.
The Apply click event checks if any change has been made on either one of the three parameters and only if a change was made it will save the parameters to the config file. It will show a Snackbar for success or failure on doing so.
One thing to consider, When you put this app in a shared folder where multiple users will run from, you have to copy the config file to the user's local folder, then get and save the settings data from there. Note that the config file may contain other app-related data and you may want to update it occasionally, so you have to build a mechanism for it. I'll introduce my solution to this challenge, in one of the upcoming posts.
Another option for theme mode is to check what theme mode the user has set on her windows OS and set the app theme mode accordingly. You can get this value by using the function Get-SystemTheme. It will return 'dark' or 'light' so you can do something like:
Set-Theme -Window $Window -ThemeMode (Get-SystemTheme)