Designer CheatSheet (Patreon)

Current supported components in Designer.
UIView, UILabel, BatteryIcon, UIImageView, WeatherIcon

The main view of Designer is a UIView this parent view holds all the elements of all themes. It's how you initially start a Designer theme.

All themes are in a json format. JSON is simply a bunch of key-value pairs. "PresetView" is a key, the {} after is the value. "type" is a key and "UIView" is the value.

The code above is the most basic structure to make any Designer theme. It is the bare minimum you need to create a theme, but nothing will be displayed. Every other element in a theme is put in the children value. "PresetView" is needed here, but all other names do not matter.

This is a Designer theme, that will display the time. Here "time_label" can be named whatever you want. The name has no meaning to Designer it is only for the creator making the theme. The rest of the key/value pairs are specific to the type UILabel. Here forward I will only be showing values for types and not the base structure. Just keep in mind they need to be in the children value of "PresetView" to show on screen.

UILabel

UILabel is simply a label that displays text. Notice the type is set to "UILabel" type. type and frame keys are on all elements. type lets Designer know what it is, and frame defines where it goes.

Frame contains special values like, screen_height, screen_width, FR~(somenumber) FB~(somenumber) and normal numbers. For example "x" key above is set to center this means that it will be placed in the center of the screen no matter the size of the screen. This takes the width of the element in consideration so no matter what the width is set to it will center it.

"y" is set to 213 this means the y (up and down) will be set 213 from the top. If "y" was FB~213 then this element would be placed 213 from the bottom. The same idea if "x" is set to "FR~213" it will be placed 213 from the right of the screen.

Basically by default if "x" was 0 and "y" was 0 then the element would be placed in the top left of the screen.

If "x" has a positive value then the element will be placed the right of top left, if it has a negative value it will be placed to the left of top left.

Since we start from top left these "FR" values are added so we can move it from the right. Idea: If we want an element to be on the right of the screen and we have no idea how big the screen is we do FR~0 this will set the X value to the right of the screen. If you do FR~100 it will be 100 from the right of the screen. "y" value acts the same way but top to bottom instead of left to right.

width and height, since again you may not know the width or height of the device screen_width and screen_height can be used.

"numberOfLines" = the amount of text lines
"fontName" = name of a default installed font. You can find a list of these fonts here. https://iosfontlist.com/#availability=10.0&preinstalled "fontName" also has a custom value "CF" which simply means custom font. When "CF" is used as a value on "fontName" you have to define another key "customFontName" then enter the name of a font you placed in /var/mobile/Library/DesignerAssets/

Example

Here I used a "CF" and set "customFontName" to lobster.otf.

You see another special value here for the "fontSize" key. It is "FH" this stands from "From Height" this means that the fontSize will be calculated from the UILabels height. The height here is set to 90 so the font will fit inside that height, if you change 90 to a higher number the fontSize will also grow. Keep in mind you can still use "fontSize": "12" and the font will not change with the height of the UILabel. This is important when you use fonts that don't exactly fit due to how they are designed. Sometimes you need a higher height to display the full font.

"textAlignment" is how the font is aligned inside the width. There is 3 values "NSTextAlignmentCenter", "NSTextAlignmentRight", "NSTextAlignmentLeft". Example of why this needed would be you want an element on the right side of the screen, you set "x" to "FR~100" meaning it's 100 from the right. You want the text alignment to be "NSTextAlignmentRight" as when the text inside the element grows you want it to grow towards the left because if it grew towards the right it would go off screen. This is a hard concept to explain.

Center = [    my text    ]
Left = [my text      ]
Right = [      my text]

This explains it better imo, basically these alignments align it to the width of the container. If aligned right it will be to the right of the full width.

"textColor" = the color of the text, pretty simple. It must be rgba() this way you can set the alpha.

There is a couple special keys that aren't shown in the screenshot above and that is "textShadow" and "textStyle" here is an example.

"textStyle" has 3 values uppercase, capitalize, lowercase

"textShadow" has a bunch of values, x, y, color, radius.
x and y set the position of the shadow, color is the color, and radius is the blur.

That's it for the "UILabel" type for now some of these ideas are passed through to the other types like frame.

Soon i'll explain UIView, BatteryIcon, UIImageView, WeatherIcon

For now these are used in data for UILabels. Examples are in system_info.json

Dates
[paddedhour] = 01
[hour] = 1
[minute] = 30
[time] = 1:30
[paddedtime] = 01:30
[day] = Wednesday
[shortday] = Wed
[date] = 5
[paddeddate] = 05
[dateordinal] = 5th
[timeofday] = morning
[month] = june
[shortmonth] = jun
[year] = 2023
[shortyear] = 23

System
[batterypercent] = 100
[ischarging] = charging or not charging
[charging] = charging only
[wifipercent] = 100%
[signalpercent] = 100%
[city] = current city
[condition] = cloudy
[temperature] = 75
[feelslike] = 75
[windspeed] = 5
[windunit] = mph or kph
[winddirection] = NNW
[humidity] = 30
[low] = 60
[high] = 70
[temptype] = C or F
[lastupdate] = 6/16/23 10:13AM
[sunset] = 5:47
[sunrise] = 4:15
[uvindex] = 3
[precip] = 30
[day1day] = monday
[day1shortday] = mon
[day1high] = 70
[day1low] = 60
[day1condition] = thunderstorms
[day1icon] = 5
[day1precip] = 20

Add your own language file /var/mobile/Library/DesignerAssets/languages/ send them to me and I can add them.

Add your own images and fonts to /var/mobile/Library/DesignerAssets/

Theme names should start with a capital letter and contain no spaces example themes start with a lowercase name for a reason.