Editor Theme & Customization

The editor uses a VS Code-inspired dark theme applied via the ApplyEditorTheme() function. All colors are converted from sRGB hex values to linear float4 using HexToLinear() for correct rendering on linear framebuffers.

Color Palette

Backgrounds & Surfaces

ElementColor
Window background#252526
Child background#252526
Popup background#2d2d2d
Docking empty background#1e1e1e
Title bar#1a1a1a
Menu bar#1a1a1a

Text

ElementColor
Primary text#d4d4d4
Disabled text#6a6a6a

Interactive Elements

ElementNormalHoveredActive
Button#2d2d2d#3c3c3c#264f78
Frame (inputs)#2d2d2d#3c3c3c#264f78
Header#264f78#264f78#264f78
Slider grab#264f78#4ec9b0

Tabs

ElementColor
Tab#252526
Tab hovered#2d2d2d
Tab selected#252526
Tab selected overline#264f78

Borders & Separators

ElementColor
Border#3c3c3c
Separator#3c3c3c
Separator hovered#264f78

Accents

ElementColor
Check mark#4ec9b0
Resize grip#264f78 (25% → 67% → 100% alpha)
Docking preview#264f78 (70% alpha)
Scrollbar grab#3c3c3c#4a4a4a#6a6a6a

Component Icon Colors

Components in the Inspector use colored header accents:

ComponentColor
TransformTeal #4ec9b0
LightsAmber #f59e0b
CameraPurple #9b59b6
ModelRendererBlue #3b82f6
AnimatorMagenta #e91e63
PhysicsRed #e74c3c
ParticlesPink #ff69b4
AudioGreen #1db954
ScriptsTeal #00d4aa

Style Values

PropertyValue
Window rounding0.0
Frame rounding2.0
Tab rounding0.0
Scrollbar rounding2.0
Grab rounding2.0
Window border size1.0
Frame border size0.0
Scrollbar size12.0
Frame padding(6, 4)
Item spacing(8, 6)
Window padding(8, 8)

How It Works

ApplyEditorTheme() is called once during editor initialization. It sets all ImGui style colors and values. The HexToLinear() helper converts sRGB hex strings (e.g., #264f78) to linear-space ImVec4 values, which is necessary because the editor renders to a linear framebuffer.