Luna UI Documentation

Default Colors

For full color palette, visit Tailwind Colors.

SLATE, GRAY, ZINC, NEUTRAL, STONE, RED, ORANGE, AMBER, YELLOW, LIME, GREEN, EMERALD, TEAL, CYAN, SKY, BLUE, INDIGO, VIOLET, PURPLE, FUCHSIA, PINK, and ROSE.

Custom Color Slots

BASE, PRIMARY, and SECONDARY.

Color Tones

Each color has 11 tones, from light to dark: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

Each tone has a semi-transparent variant.

css

/* Color Red, Tone 500 */
.example {
	color: var(--color-red-500);
}
/* Color Red, Tone 500, Half Opacity */
.example {
	color: var(--color-red-500-half);
}

USS Variables

You can use uss variables in your style sheets.

css

.example {
  background-color: var(--color-primary-50);
  border-color: var(--color-slate-900);
  color: var(--color-lime-900);
  -unity-background-image-tint-color: var(--color-gray-500);
}

USS Classes

Or you can use uss classes to directly color your visual elements.

In addition to colors listed above, the classes also include 'transparent', 'black', and 'white'.

Background Color

Format: bg-{color}-{tone}

html

<engine:VisualElement class="bg-transparent" />
<engine:VisualElement class="bg-red-500" />
<engine:VisualElement class="bg-red-500-half" />

Text Color

Format: text-{color}-{tone}

html

<engine:Label class="text-black" />
<engine:Label class="text-white" />
<engine:Label class="text-red-500" />
<engine:Label class="text-red-500-half" />

Border Color

Format: border-{color}-{tone}

html

<engine:VisualElement class="border-purple-700" />
<engine:VisualElement class="border-red-500" />
<engine:VisualElement class="border-red-500-half" />

Image Tint Color

Format: tint-{color}-{tone}

html

<engine:VisualElement class="tint-white" />
<engine:VisualElement class="tint-red-500" />
<engine:VisualElement class="tint-red-500-half" />

UIColor Class

Allows you to easily apply uss classes listed above to VisualElements from code.

csharp

UIColor uiColor = new UIColor(UIColorName.Purple, UIColorValue.V_400);

// Set background color
visualElement.AddToClassList(uiColor.GetUssClassBG());
// Set border color
visualElement.AddToClassList(uiColor.GetUssClassBorder());
// Set text color
visualElement.AddToClassList(uiColor.GetUssClassText());
// Set image tink color
visualElement.AddToClassList(uiColor.GetUssClassImageTint());