Hello Sazna,
it depends on where the colors are determined. Consequently create variants of the affected GUI components and change there the colors from dark to light. Also possible, instead of specifying the colors directly in GUI components you use constants containing the color values. Then you don't need to create variants of the GUI components. Instead you create variants of the constants. Following could be the approach:
1. You store all light mode colors in constants. For example, a constant for the background and another constant for the foreground color. If you plan to use 100 colors, you create 100 constants.
2. Now, wherever a GUI component needs the color value, you use the respective constant.
3. To support dark mode, you override the constants by so-called 'variants'. In the variant you can specify another color. Additionally, you specify in the variant a condition when the variant is active.
4. Since you want the variants to be activated dynamically at the runtime, the above mentioned variant condition should depend on a Style member. At the runtime the style can be switched on and off. Accordingly, the variant become active and inactive.
5. When the variant is actually active, all accesses to the original constant result in the value found in the variant. When the variant is inactive, the color value from the original constant is used.
The chapter Managing variants explains the technical aspects more in detail.
This approach has however a peculiarity: the expression containing the multi-variant constant needs to be re-evaluated in order to become a new value (dark or light). The simplest to force this re-evaluation is a new instantiation of all actually visible GUI components. In other words, after you switch on/off the style controlling the color constant variants, you dismiss the existing screen (or screens) and present them again. This should cause the components to be created and initialized again now with new colors.
If you don't want (or you can't) recreate the existing components, I would recommend following trick:
6. Wherever you assign a multi-variant color constant to an initialization expression in Inspector window, prefix this initialization by the %+ operator (see also React automatically to language selection. This operator forces Embedded Wizard to generate additional re-initialization code for the affected initialization. The following screenshot demonstrates the usage of this %+ operator, here in the initialization of the property Color of a Rectangle view with a constant named Application::BkColor:
7. The above mentioned code generation depends on an additional Multilingual attribute, you have to set it true for each GUI component class, you want the automatic color alternation:
As you may have noticed, the trick explained here uses Embedded Wizard automatic language actualization. To force the execution of the code containing the initialization expressions, you have thus to switch the language temporarily.
8. Add a new language member to your project and name it e.g. DummyLanguage.
9. Now, when the user switches the dark/light modes, switch on/off the the style controlling the variants and switch temporarily the language:
For demonstration purpose I have prepared a small example. You will find it in the attachment at the end of this comment named theme-v12.zip. This example is created explicitly for Embedded Wizard Studio version 12. For the next version 13, we have improved this approach so the above mentioned trick with language switch will not be necessary anymore.
In the example, please note the constants BkColor and FgColor as well as their variants for the dark theme. Also note the Style DarkTheme and the dummy language:
In practice you can add further constants and override them by variants. Then you can use the constants in your project. When the user switches the color theme, the above mentioned trick with language selection triggers all initialization expressions and the GUI should appear updated.
Please note, if colors are determined within the logic of a component (e.g. in some method executed in response to an event), this code is not automatically executed when the the trick with language selection is performed. Only initialization expressions specified in Inspector are using this approach.
Therefore, if you have some color selected within a method, you will need to re-evaluate the corresponding expressions explicitly. For this purpose you copy/paste the affected expression inside the ReInit() method. The ReInit() method is executed when the language is switched. It is thus well suitable to perform the necessary color updates. For demonstration purpose, the example uses such a ReInit() method to update the color of a small rectangle in the upper-left screen corner.
The project demonstrating the application case.
I hope it helps you further.
Best regards
Paul Banach
