Cge tutorial - custom colors


If you have Facer premium, you can design watch faces and utilize the theme picker (color picker) which is pretty cool and offers end users to choose a theme. To do this you simply tap on the paint brush of any layer that you wish to be theme-able.

But, what if some of the Facer theme colors don’t work with your idea? If you want to create your own custom palette, you can do so using VAR functions.
In this tutorial I will be using custom backgrounds but you can use the theory for many other things.
1st, create the number of backgrounds (layers) you want, and choose the custom color for each background.
In the opacity setting for each layer you will use the following code:


Change A to the total number of backgrounds you have and keep it the same for every layer.
Change B for each layer starting at 0 and increase consecutively to the last layer.
For example, if you only wanted 3 backgrounds you would create three layers and in each opacity field you would enter the following:




In my example face attached, I have 10 colors (layers), so the 1st layer (white) uses


Layer two uses:


and so on.

Finally, add a VAR increment and VAR decrement layer so that your users can cycle through your chosen themes. Please let me know if you have any questions, and remember to have FUN!!


Great idea and nice tutorial!


Thank you for this, a great solution to the very limited Theme option and a shame Facer developers never pushed/added such features.
Just tried this out on various elements and works well, ideal for those wanting to design watches with only a pre-set/certain colour range (i.e. pastel ranges).


Excellently explained, great Tutorial thanks @thomasfmal :beers:

1 Like

Thanks for this tutorial, it’s really useful, I didn’t know how exactly to use VAR Now I’ll try to see if I succeed. Thanks alot

1 Like

This code works fine when it starts clicking on next color, but when it starts clicking on last color, the code hangs on white color.

I used this code and it seems to have worked better:


This code I used was from Pascal - Spes lucis

Pascal - Spes lucis - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer

Thanks Pascal for releasing your code, it helps the community a lot, by the way, thanks to everyone who releases their code for inspection.

1 Like

@chaficfeguri I note after Inspecting the work of Pascal you have flagged he does not use the VAR for the Colour changing on the Face but the Facer Theme . This Tutorial was specifically about changing Colours with VAR . The thing with these Tutorials is to keep them simple for People who are starting out on thier Face Making Journey not at the End Like Myself .


Very well scored, I sing more simply explained so that we can use Facer to the maximum. I think there are others like me who don’t know programming and we look at some formulas and then put our hands in our heads because we don’t know what to do with them.

1 Like

Some use the Descriptive form of maths . Peter is brilliant as well . I will not invoke him but you see him here as petruuccios I have removed the @ as I keep invoking him . Again well done @thomasfmal .
You will be surprised what you are able to remember and do after you have put in your 1000 hours . I would say to myself I can never remember this .

That is the way Increment and decrement works in this example. White is the 1st background (0) so think of it as the default. If you tap on reset it brings you back to white. So, the decrement (or back) works as intended, not going back beyond the default.

1 Like

I did a test with this code on my watch . It did not hang , Modulo ensured that it started round the cycle again Exactly as Modulo is suppose to work . Having decrement and Reset is a Luxury .