> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/styling/code-only-styling/styling-using-activestyles.md).

# Styling Using ActiveStyles

{% hint style="info" %}
This document assumes using V3 styles, which were introduced at the end of November 2025. If your project is using V2 visuals, you need to upgrade to V3 before the styling discussed on this document can be used.

For information on upgrading, see the [Migrating to 2025 November](/gum/gum-tool/upgrading/migrating-to-2025-november.md) page.
{% endhint %}

## Introduction

Gum can be restyled using an `ActiveStyle` object. Changes to `ActiveStyle` result in style changes for all controls created after the change is made. `ActiveStyle` can make it easy to restyle all controls without needing to make changes to each individual control.

## Styling.ActiveStyle.Colors

Gum includes a `Styling` object which contains multiple color values for default styling. For example the `Primary` color can be changed using the following code:

```csharp
// Initialize
Styling.ActiveStyle.Colors.Primary = Color.DarkGreen;
```

The following properties exist on Colors:

<table><thead><tr><th width="212.18182373046875">Colors Property</th><th>Used By</th></tr></thead><tbody><tr><td>Primary</td><td><ul><li>Button Background</li><li>CheckBox Background</li><li>ComboBox DropdownIndicator</li><li>ListBoxItem Background (Selected)</li><li>MenuItem Background (Selected)</li><li>RadioButton Background</li><li>Slider Thumb Background</li><li>TextBox Caret</li><li>Window Background (Default only border)</li></ul></td></tr><tr><td>Warning</td><td><ul><li>FocusIndicators on all controls</li></ul></td></tr><tr><td>Accent</td><td><ul><li>ListBoxItem Background (Highlight)</li><li>MenuItem Background (Highlight)</li></ul></td></tr><tr><td>InputBackground</td><td><ul><li>ComboBox Background</li><li>ListBox Background</li><li>Menu Background</li><li>PasswordBox Background</li><li>ScrollViewer Background</li><li>Slider Track Background</li><li>Splitter Background</li><li>TextBox Background</li></ul></td></tr><tr><td>SurfaceVariant</td><td><ul><li>ScrollBar Track Background</li></ul></td></tr><tr><td>IconDefault</td><td><ul><li>CheckBox Check</li><li>RadioButton Radio</li><li>ScrollBar UpButton/DownButton Icon</li></ul></td></tr><tr><td>TextPrimary</td><td><ul><li>Button Text</li><li>CheckBox Text</li><li>ComboBox Text</li><li>Label</li><li>ListBoxItem Text</li><li>MenuItem Text</li><li>MenuItem SubmenuIndicator</li><li>PasswordBox Text</li><li>RadioButton Text</li><li>TextBox Text</li></ul></td></tr><tr><td>TextMuted</td><td><ul><li>PasswordBox PlaceholderTextInstance</li><li>TextBox PlaceholderTextInstance</li></ul></td></tr></tbody></table>

## Code Example: Applying Styles Before Creating Controls

The `Styling.ActiveStyle.Color` property includes styles that are used by controls when they are created. We can see how these affect controls by creating a sample project:

```csharp
protected override void Initialize()
{
    GumUI.Initialize(this);

    var window = new Window();
    window.AddToRoot();
    window.Anchor(Anchor.Center);
    window.Width = 270;
    window.MinWidth = 270;
    window.Height = 400;
    window.MinHeight = 400;

    var windowVisual = (WindowVisual)window.Visual;

    var stackPanel = new StackPanel();
    window.AddChild(stackPanel);
    stackPanel.Dock(Dock.Top);
    stackPanel.Y = window.TitleHeight;
    stackPanel.Width = -16;

    var button = new Button();
    var buttonVisual = (Gum.Forms.DefaultVisuals.V3.ButtonVisual)button.Visual;
    stackPanel.AddChild(button);

    var checkBox = new CheckBox();
    stackPanel.AddChild(checkBox);

    var comboBox = new ComboBox();
    stackPanel.AddChild(comboBox);
    for(int i = 0; i < 10; i++)
    {
        comboBox.Items.Add($"ComboBox Item {i}");
    }

    var listBox = new ListBox();
    stackPanel.AddChild(listBox);
    listBox.Height = 200;
    for(int i = 0; i < 20; i++)
    {
        listBox.Items.Add($"Item {i}");
    }

    var radioButton1 = new RadioButton();
    stackPanel.AddChild(radioButton1);
    radioButton1.Text = "Option 1";

    var radioButton2 = new RadioButton();
    stackPanel.AddChild(radioButton2);
    radioButton2.Text = "Option 2";

    var textBox = new TextBox();
    stackPanel.AddChild(textBox);
}
```

This code produces a set of controls which can be used to check how styling is applied.

{% columns %}
{% column %}

<figure><img src="/files/gupnLRXUdga0V67j3Bn8" alt=""><figcaption><p>Controls using default styles</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/oRvsAY0PaJjdOiIzPdK4" alt="Controls using default styles (Animated)"><figcaption><p>Controls using default styles (Animated)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

We can prefix the following code before creating all of our controls:

```csharp
protected override void Initialize()
{
    GumUI.Initialize(this);

    Styling.ActiveStyle.Colors.Primary = Color.DarkGreen;
    Styling.ActiveStyle.Colors.InputBackground = Color.Black;
    Styling.ActiveStyle.Colors.TextPrimary = Color.LimeGreen;
    Styling.ActiveStyle.Colors.Accent = Color.Yellow;

    // Create controls here:
```

By changing these colors, controls are created using the new colors:

{% columns %}
{% column %}

<figure><img src="/files/cY7GIX4lqa6jMSxCpPoa" alt="Colors changed with minimal code"><figcaption><p>Colors changed with minimal code</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/IypJ1GGuvyGCVWp1lYIY" alt=""><figcaption><p>All Styling behaviors remain (darken/lighten)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Styling and Fonts

Just as `Styling.ActiveStyle.Colors` controls the colors of every control created after it is set, `Styling.ActiveStyle.Text` controls their fonts — so a single assignment restyles text across the entire project without modifying individual controls. It exposes three text states:

* `Normal` — the default font, applied to the text of most controls (`Button`, `Label`, `TextBox`, `ListBoxItem`, and so on).
* `Strong` — a bold variant, applied by `ComboBox`.
* `Emphasis` — an italic variant (not applied by the built-in controls; available when you apply it to your own text).

Set the `Font`, `FontSize`, `IsBold`, or `IsItalic` values on a state to change it. The following code relies on KernSmith for dynamic font creation. For more information on dynamic fonts and information on using KernSmith, see the [Font Strategies](/gum/code/files-and-fonts/fonts/font-strategies.md#dynamic-kernsmith-generation) page.

```csharp
// initialize
GumUI.Initialize(this);

CustomSetPropertyOnRenderable.InMemoryFontCreator =
    new KernSmithFontCreator(GraphicsDevice);

var textStyling = Gum.Forms.DefaultVisuals.V3.Styling.ActiveStyle.Text;
var normalState = textStyling.Normal;
normalState.SetValue("Font", "Consolas", "string");
normalState.SetValue("FontSize", 28, "int");

var button = new Button();
button.AddToRoot();
button.Anchor(Anchor.Center);

base.Initialize();
```

<figure><img src="/files/Y18EaR33cW6kgUSi3BMF" alt=""><figcaption><p>Button using larger Consolas font</p></figcaption></figure>

## Styling and Creation Order

Styling only applies after it has been set. Controls which are created before styling is set do not automatically update to the new style. The following code shows how order can impact how styling is assigned:

```csharp
// Initialize
var stackPanel = new StackPanel();
stackPanel.AddToRoot();
stackPanel.Anchor(Anchor.Center);

var button1 = new Button();
stackPanel.AddChild(button1);

Styling.ActiveStyle.Colors.Primary = Color.Red;

var button2 = new Button();
stackPanel.AddChild(button2);

Styling.ActiveStyle.Colors.Primary = Color.Purple;

var button3 = new Button();
stackPanel.AddChild(button3);

```

<figure><img src="/files/D3U9jpLos0Z1uSTLl6Rw" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This behavior may change in future versions of Gum.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.flatredball.com/gum/code/styling/code-only-styling/styling-using-activestyles.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.