Dark mode compatible UI

[Lobby]

image.png

Starting with version 1.12.87, TheoTown supports a dark mode. Default UI gadgets adapt automatically, but plugins using hard-coded colors may need some changes.

Problem

image.png

Hard-coded text colors can become unreadable in dark mode. Let's assume the following code:

Code: Select all    Reset

local function update()
  if selected then
    lbl:setColor(255, 255, 255)
  else
    lbl:setColor(0, 0, 0)
  end
end

Lua editor

Run

Output: Select all

...

Light and dark mode colors
To fix that, light/dark mode color constants were added to a newly added table Color. For example:

Code: Select all

setColor(Color.TEXT)

In here Color.TEXT returns the fitting text color for light or dark mode.

So the solution for our example is:

Code: Select all    Reset

local function update()
  if selected then
    lbl:setColor(Color.TEXT_SELECTED)
  else
    lbl:setColor(Color.TEXT)
  end
end

Lua editor

Run

Output: Select all

...

Which fixes the issue:

image.png

The idea behind color constants is that you pick colors based on semantics rather than by concrete, fixed values.


Available constants

image.png

You can find all available color constants under Resources in the Plugin Creator Tools. It is available in the game's built-in plugin store. Prefer these constants over hard-coded colors to match the game UI in both light and dark mode.

Custom handling
For cases not covered by the predefined colors, you can find out if dark mode is currently active using GUI.isDarkMode(). Though, you should prefer Color table constants whenever possible for better compatibility with future changes. The Color table is available starting version 1.12.86.