Hello everyone,
Today I want to share with you two ways to manage themes in your application.
- The first method is simple but applies a general theme to the various components.
- The second method is complex (if not borderline insane), but it allows you to customize any component, and with a bit of patience, you can truly modify every aspect of them.
1st Method (simple)
Everything is managed by a single function, and you just need to call it using one of the available themes.
Each theme has 6 variables:
- bg: the app background, this is the only one that can accept both colors and images.
- txt: text color
- btn: button color
- var1: color variant 1
- var2: color variant 2
- var3: color variant 3
Each key is used to assign color to a group of components (you can add as many keys as you need, depending on your requirements).
Skipping the first blocks that check if the theme exists and whether the background is an image or a color
Each loop performs the color change operation on every element of the associated list (you need to add them manually to ensure the color is applied)
You can also create multiple loops for different components of the same type.
For example, you can use a for each loop to change the color of CardView 1 and 3 to
btn, and another loop to change the color of CardView 2 using var3.I might explain this in more detail if anyone’s interested.
Some components might require multiple colors, which is why I previously mentioned that more than three variables might be necessary,
But of course, feel free to manage it as you see fit.
Themes, being dictionaries, can easily be edited/sent via JSON.
For example, my app is connected to Firebase, which allows it to download a new theme every day (or based on a specific condition) without having to include them statically in the APK.
This approach makes it possible to update the app’s visual appearance at any time, without the need to publish a new version on the store.
=
{
"light":{
"bg":-1,
"txt":-16777216,
"btn":-1,
"var1":-10066330,
"var2":-6710887,
"var3":-13421773
}
}
then
Finish!!! 
ThemeManagerWE.aia (24.9 KB)
2nd Method (
)
The way the second method works is similar, but it requires a bit of setup beforehand, we need to assign an ID to the components we want to make unique compared to the general theme.
In this case, I’ve assigned IDs to all of them, but that might not be necessary.
In the theme, I’ve configured them like this.
The list is necessary to configure every part of the component, for example:
After setting up this configuration, all you need to do is add an intermediary function called getCustomComponentColor to your setTheme function, placing it between the component setting and the color like this.
The function simply looks for the component’s ID in the theme and applies it; if it’s not found, it uses the default color.
If the index is wrong, throw an error that indicates the component and the index (it’s not ideal, but it can be useful)
Even with this mode, it’s possible to have the themes in JSON .
{
"custom": {
"bg": -1,
"txt": -13421773,
"btn": -10092544,
"var1": -6737152,
"var2": -3407872,
"var3": -6750208,
"Button_Theme_Light": [
-1,
-13421773
],
"Button_Theme_Dark": [
-13421773,
-1
],
"Button_Theme_Kodular": [
-10092340,
-1
],
"Button_Theme_Custom": [
-1,
-16777063
],
"Card_View1": [
-1
],
"Card_View2": [
-13421773
],
"Card_View3": [
-10092340
],
"Label_CV1": [
-16777216
],
"Label_CV2": [
-1
],
"Label_CV3": [
-1
],
"Label1": [
-10066330
],
"Label2": [
-16777216
],
"Label3": [
-10092340
],
"Text_Box1": [
-10066330,
-3355444
],
"Text_Box2": [
-16777216,
-10066330
],
"Text_Box3": [
-10092340,
-6710785
],
"Slider1": [
-6710887,
-3355444,
-6710887
],
"Slider2": [
-13421773,
-6710887,
-13421773
],
"Slider3": [
-3394612,
-26113,
-3394612
]
}
}
Finish!!!
ThemeManagerWEplus.aia (32.1 KB)
These are just some of the many ways to use custom themes in your app, so take it as inspiration, build on it and make it even better.
There’s always room for improvement! 
This is a just-for-fun project.
If you’re looking for an easier way to manage themes, you can use this extension kindly provided by @Glich 
, which makes everything simpler.
Update after post
important
One of the fundamental rules before posting something is to check if it’s already been posted 
.
I did check, but not thoroughly enough, and after publishing, I realized there were already similar post.
Luckily, I also included the more complex part.
Out of fairness, I’m also sharing the post from those who got there before me.
Happy 
oding!