[1.12.95] Themes

[Lobby]

image.png

Hello everyone!

TheoTown now supports custom user interface themes through plugins. Themes can change the appearance of menus, dialogs, buttons, text and other interface elements without modifying the game itself. This tutorial explains how to create a theme, customize its colors and, optionally, replace UI graphics.

1. Creating your first theme
A theme is defined like other TheoTown plugin drafts using JSON. Here is a simple dark theme with purple accents:

Code: Select all

[
  {
    "id": "$my_purple_theme",
    "type": "theme",
    "title": "Purple Night",
    "text": "A dark interface with purple accents.",
    "dark": true,

    "text color": "#FFFFFF",
    "secondary text color": "#BBBBCC",
    "accent text color": "#CC99FF",

    "background color": "#191525",
    "menu background color": "#242035",
    "menu item color": "#322B48",
    "menu text color": "#FFFFFF",

    "window title color": "#CC99FF",
    "selected text color": "#FFFFFF"
  }
]

Save the JSON file as part of your plugin. The game recognizes the

Code: Select all

"type": "theme"

property automatically. Once installed, the theme appears under: Settings → User Interface → Theme
It can then be selected like TheoTown's built-in themes.

2. Dark Teal demo theme
If you prefer to start with an existing theme, you can download the Dark Teal demo plugin provided with this tutorial. It contains a complete working theme that demonstrates the basic structure, color properties and UI customization options. You can install it directly, inspect its files and modify it to create your own theme.

dark-teal-theme.zip

The easiest way to get started is to make a copy of the plugin, change its id, title and colors, and then experiment with the remaining properties.
Important: Always give your modified theme its own unique ID before publishing it.

3. Using an existing theme as a base
You do not need to define every property yourself. Use

Code: Select all

"dark": true

to use TheoTown's dark appearance as the base, or

Code: Select all

"dark": false

to use the light appearance.

A theme can also use another theme as its base:

Code: Select all

{
  "id": "$my_blue_theme",
  "type": "theme",
  "title": "Blue Night",
  "base": "$my_purple_theme",
  "accent text color": "#66AAFF"
}

Only properties explicitly defined by your theme are changed. Everything else keeps the appearance of the selected base. This makes simple color variations very easy to create.

4. Available color properties
General interface colors

• text color
• selected text color
• secondary text color
• accent text color
• red text color
• green text color
• yellow text color
• orange text color
• background color

Menus and windows

• menu background color
• menu item color
• menu title color
• menu text color
• window title color
• item background color 0
• item background color 1

City information indicators

• indicator rank color
• indicator text color
• indicator text green color
• indicator text red color
• indicator text yellow color
• indicator text uber color
• indicator selection color

Usually you only want to change a few colors of the base theme.

5. Customizing interface graphics
More advanced themes can also replace graphics used by the interface. This includes:

• checkbox off frame
• checkbox on frame
• radio off frame
• radio on frame
• close button frame

These are configured using frame properties.

Nine-Patches

image.png

Many interface elements use nine-patch rendering. A nine-patch consists of nine image sections arranged in a 3×3 grid. This allows elements such as windows and buttons to be resized without stretching their corners. The patches may have non uniform sizes, but each border must have constant thickness.

Supported nine-patch properties include:

• panel frames
• window frames
• button frames
• button down frames
• button marked frames
• button blue frames
• button blue down frames
• list item frames
• list item selected frames
• list box frames
• notification bar frames
• progress bar frames
• progress bar filled frames
• rect frames
• rect shadow frames
• white rect frames
• white rect bordered frames
• white rect empty frames
• indicator frames

Each nine-patch definition requires at least nine consecutive frames. Golden and green button states can additionally be customized using:

• button gold frames
• button green frames

These properties may contain multiple groups of nine frames.

If you are new to TheoTown's frame system, starting with color customization is recommended before replacing interface graphics. See the demo theme to get familiar with how the frames are used.

6. Testing your theme
It is worth testing these areas in particular:

• Main menu and settings
• Building selection
• City information and statistics
• Budget window
• Plugin Store
• Confirmation dialogs
• Notifications

If something does not look right, adjust the corresponding properties and reload the plugin.

7. Sharing your theme
Once your theme is ready, you can publish it through TheoTown's Plugin Store. Other players can then download it and select it through their user interface settings.

I'm looking forward to seeing what you create!

[yinx]

That’s awesome! A few months ago, I met a Russian guy on the game’s Discord server who showed me some GUIs with custom image backgrounds - he used "9-patch" scaling implemented via Lua. It seems like it’s become much easier now to create vibrant themes and unique, distinctive styles

[Yakka Works]

Finnaly,a good feature. You're cooking as always lobby. Great as always.

[Zakyu]

Thanks lobby, i want to give suggestion like blur element i think or like dynamic interface that can follow the tap or mouse on the screen, i know it's not easy and complex but it can make theotown more modern and also more pleasing to the eye for UI and UX
I'm making my own version of the UI, I'm trying to learn it for a while and I'll probably upload it too (discord or forum, it's hard for the plugin store.. the moderation is really strict )
anyway thankyou for your work on this game, keep it up lobby

[dnswodn]

I suggest that we add opacity (alpha channel) to color properties, like "menu item color 1": "#FFFFFF77", which would be great of help in the development of a semi-transparent theme. As I ran into such a problem: When I try to make a theme with an opacity of 25%, I have to set "text color" to white to ensure readability. However, while we have a nice view in a dialog, it could be a disaster in the settings menu...

Dialog

Settings Menu

It is really hard to read some texts as "menu item color 0/1" is too similar to "text color". Adding opacity (alpha channel) to color properties can be an ideal solution to such problems.