Luna UI Documentation

Luna UI provides a theming system through the UIColor, UIColorName, and UIColorValue classes. This system generates USS class names for consistent color styling across your UI.

Overview

The UIColor system maps color names and values to USS class names following a utility-first approach similar to Tailwind CSS. It supports backgrounds, borders, text, and image tints.

UIColorName Enum

Available color names:

Semantic	Description
BASE	Base theme color
PRIMARY	Primary accent color
SECONDARY	Secondary accent color

Gray Scale
SLATE	Blue-gray tones
GRAY	Neutral gray
ZINC	Cool gray
NEUTRAL	True neutral
STONE	Warm gray

Colors
RED	Red
ORANGE	Orange
AMBER	Amber/Gold
YELLOW	Yellow
LIME	Lime green
GREEN	Green
EMERALD	Emerald green
TEAL	Teal
CYAN	Cyan
SKY	Sky blue
BLUE	Blue
INDIGO	Indigo
VIOLET	Violet
PURPLE	Purple
FUCHSIA	Fuchsia/Magenta
PINK	Pink
ROSE	Rose

Special
TRANSPARENT	Transparent color

UIColorValue Enum

Color intensity values (50-950):

Value	Description
V_50	Lightest
V_100	Very light
V_200	Light
V_300	Light-medium
V_400	Medium-light
V_500	Medium (default)
V_600	Medium-dark
V_700	Dark
V_800	Very dark
V_900	Darkest
V_950	Near black

UIColor Class

Combines a color name and value to generate USS class names.

Constructor

csharp

public UIColor()                                    // Default: SLATE-50
public UIColor(UIColorName name, UIColorValue value)

Methods

Method	Returns	Example Output
GetUssClassBG()	Background class	`bg-blue-500`
GetUssClassBorder()	Border class	`border-blue-500`
GetUssClassText()	Text class	`text-blue-500`
GetUssClassImageTint()	Tint class	`tint-blue-500`
GetColor(VisualElement)	Unity Color	Reads from USS variables

Basic Usage

csharp

using UnityEngine;
using UnityEngine.UIElements;
using CupkekGames.Luna;

public class ColorExample : MonoBehaviour
{
    [SerializeField] private UIColor _buttonColor = new UIColor(UIColorName.PRIMARY, UIColorValue.V_500);
    
    private void Start()
    {
        var button = _uiDocument.rootVisualElement.Q<Button>("MyButton");
        
        // Apply background color class
        button.AddToClassList(_buttonColor.GetUssClassBG());
        
        // Apply border color class
        button.AddToClassList(_buttonColor.GetUssClassBorder());
    }
}

Dynamic Color Changes

csharp

public void SetButtonState(Button button, bool isActive)
{
    // Remove old classes
    button.RemoveFromClassList(_inactiveColor.GetUssClassBG());
    button.RemoveFromClassList(_activeColor.GetUssClassBG());
    
    // Add new class based on state
    var color = isActive ? _activeColor : _inactiveColor;
    button.AddToClassList(color.GetUssClassBG());
}

Getting Unity Color

To get the actual Unity Color value from USS variables:

csharp

UIColor myColor = new UIColor(UIColorName.BLUE, UIColorValue.V_500);

// Element must be in the hierarchy for custom styles to be resolved
Color actualColor = myColor.GetColor(myElement);

This reads from the USS custom property --color-{name}-{value}.

Generated USS Classes

The system generates classes following this pattern:

Type	Pattern	Example
Background	`bg-{name}-{value}`	`bg-primary-500`
Border	`border-{name}-{value}`	`border-red-600`
Text	`text-{name}-{value}`	`text-slate-100`
Tint	`tint-{name}-{value}`	`tint-green-400`

For TRANSPARENT, the value is omitted:

bg-transparent
border-transparent
text-transparent
tint-transparent

USS Variables

Colors are defined as USS custom properties:

css

:root {
    /* Primary colors */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;
    
    /* Blue colors */
    --color-blue-50: #eff6ff;
    /* ... */
}

/* Background utility classes */
.bg-primary-500 {
    background-color: var(--color-primary-500);
}

.bg-blue-600 {
    background-color: var(--color-blue-600);
}

/* Border utility classes */
.border-red-500 {
    border-color: var(--color-red-500);
}

/* Text utility classes */
.text-slate-100 {
    color: var(--color-slate-100);
}

/* Image tint utility classes */
.tint-green-400 {
    -unity-background-image-tint-color: var(--color-green-400);
}

Inspector Integration

UIColor is serializable and works in the Unity Inspector:

csharp

public class MyComponent : MonoBehaviour
{
    [SerializeField] private UIColor _backgroundColor;
    [SerializeField] private UIColor _borderColor;
    [SerializeField] private UIColor _textColor;
}

Example: Themed Button

csharp

using UnityEngine;
using UnityEngine.UIElements;
using CupkekGames.Luna;

public class ThemedButton : MonoBehaviour
{
    [SerializeField] private UIColor _normalBg = new UIColor(UIColorName.PRIMARY, UIColorValue.V_500);
    [SerializeField] private UIColor _hoverBg = new UIColor(UIColorName.PRIMARY, UIColorValue.V_600);
    [SerializeField] private UIColor _pressedBg = new UIColor(UIColorName.PRIMARY, UIColorValue.V_700);
    [SerializeField] private UIColor _textColor = new UIColor(UIColorName.SLATE, UIColorValue.V_50);

    private void Start()
    {
        var button = _uiDocument.rootVisualElement.Q<Button>("ThemedButton");
        
        // Apply base styles
        button.AddToClassList(_normalBg.GetUssClassBG());
        button.AddToClassList(_textColor.GetUssClassText());
        
        // Handle hover/press states in USS or via events
        button.RegisterCallback<MouseEnterEvent>(e => {
            button.RemoveFromClassList(_normalBg.GetUssClassBG());
            button.AddToClassList(_hoverBg.GetUssClassBG());
        });
        
        button.RegisterCallback<MouseLeaveEvent>(e => {
            button.RemoveFromClassList(_hoverBg.GetUssClassBG());
            button.AddToClassList(_normalBg.GetUssClassBG());
        });
    }
}

Tips

Use semantic colors (PRIMARY, SECONDARY, BASE) for theme-able elements
Use specific colors (BLUE, RED, etc.) for fixed-color elements
The 500 value is typically the "default" shade of each color
Lower values (50-400) are lighter, higher values (600-950) are darker
Refer to Colors for the full color reference

UI Color System

Overview

UIColorName Enum

UIColorValue Enum

UIColor Class

Constructor

Methods

Basic Usage

Dynamic Color Changes

Getting Unity Color

Generated USS Classes

USS Variables

Inspector Integration

Example: Themed Button

Tips