Unity-Theme

Create palettes of colors and components to change specific colors on a specific visual element. Very useful for UI.

Features

• ✔️ Name colors
• ✔️ Create custom themes with names
• ✔️ Add as many colors as you need
• ✔️ Name a theme as you want
• ✔️ Change theme any moment by name
• ✔️ Bind color to: Image, SpriteRenderer, TextMeshPro, etc
• ✔️ Easy way to add custom color binder by new C# class with just a few lines of code
• ✔️ Rename color even after binding to a component, with no broken links

Stability status

Installation

Option 1 - Installer

• ⬇️ Download Installer
• ** Import installer into Unity project**

  • You may use double click on the file - Unity will open it
  • OR: You may open Unity Editor first, then click on Assets/Import Package/Custom Package, then choose the file

Option 2 - OpenUPM-CLI

• ⬇️ Install OpenUPM-CLI
• Open command line in Unity project folder

openupm add extensions.unity.theme

Usage

• Go to Window/Unity-Theme
• Customize color palettes as you want
• Add ColorBinder components to a target GameObject

Color Binder

A component that binds a color to a specific target, such as Image, SpriteRenderer, TextMeshPro, or anything else.

There is a list of built-in color binders:

• ✔️ Light
• ✔️ Image
• ✔️ Button
• ✔️ Shadow
• ✔️ Toggle
• ✔️ Outline
• ✔️ Renderer
• ✔️ Selectable
• ✔️ TextMeshPro
• ✔️ LineRenderer
• ✔️ MeshRenderer
• ✔️ SpriteRenderer
• ✔️ SkinnedMeshRenderer
• ✔️ SpriteShapeRenderer

Color palettes

Modify palettes, instant response with all connected GameObjects.

C# Api

Colors

using Unity.Theme;

Theme.Instance.AddColor("Primary", "#6750A4");
Theme.Instance.AddColor("Primary", Color.white);

Theme.Instance.SetColor("Primary", "#6750A4");
Theme.Instance.SetColor("Primary", Color.white);

Theme.Instance.SetOrAddColor("Primary", "#6750A4");
Theme.Instance.SetOrAddColor("Primary", Color.white);

Theme.Instance.RemoveColorByName("Primary");
Theme.Instance.RemoveColor(colorData);
Theme.Instance.RemoveAllColors();

Themes

using Unity.Theme;

Theme.Instance.AddTheme("Light");
Theme.Instance.SetOrAddTheme("Light");

Theme.Instance.CurrentThemeName = "Light";
Theme.Instance.CurrentThemeIndex = 0;

Theme.Instance.RemoveTheme("Light");
Theme.Instance.RemoveAllThemes();

Create a custom ColorBinder

If you need to bind color to something else, you may extend from BaseColorBinder as listed below.

using UnityEngine;
using TMPro;

namespace Unity.Theme.Binders
{
    [AddComponentMenu("Theme/TextMeshPro Color Binder")]
    public class TextMeshProColorBinder : GenericColorBinder
    {
        protected override void SetColor(TextMeshProUGUI target, Color color)
            => target.color = color;

        protected override Color? GetColor(TextMeshProUGUI target)
            => target.color;
    }
}

Other

• Color palette builder by Google's Material Design V3

Migration from 2.x.x version

The version 3.x.x or newer has a different database structure, so you need to migrate your data manually if you want to keep existed binders to still be connected to a right color. The binders are using GUIDs to connect to colors.

❗❗❗Please follow the exact steps order

Step 1

Close Unity project to avoid any data loss.

Step 2 - backup

• Make a backup copy of Assets/Resources/Unity-Theme Database.asset, put it outside of a project.
• Make a screenshot of colors in each theme to reproduce them later with color picker.

Step 3 - database template

• Download Unity-Theme-Database.json.
• Save it at Assets/Resources/Unity-Theme-Database.json.
• Use it as a template. Feel free to delete all existed colors if you want.

Step 4 - data migration

You need to copy GUIDs from Assets/Resources/Unity-Theme Database.asset to Assets/Resources/Unity-Theme-Database.json. To do that, please take a look at the samples below. You may see what is data format of old and new databases, and how to copy GUIDs. You may ignore color for now, it is easier to change color values later using color picker tool and the screenshot of old color palette.

Sample of Assets/Resources/Unity-Theme Database.asset - old file (source)

Take a look at the guid: 6b934efb-0b9b-42fd-82fd-7a0dbd1de53c, the file contains it 3 times, depends on your setup. You would need to copy the guid to the Unity-Theme-Database.json file.

…

Sample of Assets/Resources/Unity-Theme-Database.json - new file (destination)

That is the file that you need to make in the end of the migration process. When you done, you may need to close & open Unity project to let Unity-Theme to reload the data.

…

Step 5 - package update

• Delete Unity-Theme 2.x.x from the project while Unity is closed

openupm remove extensions.unity.theme

• Install latest Unity-Theme

openupm add extensions.unity.theme

Step 6 - cleaning up

• Delete the Assets/Resources/Unity-Theme Database.asset file (original and copy).
• ✅ migration completed, well done!