> 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/themes.md).

# Themes

A single line of code restyles **every** Gum Forms control. Drop in a built-in theme — or author your own — and the same UI takes on a completely different look without changing any of your control code.

|                                      DarkPro                                     |                                      Bubblegum                                     |                                      Neon                                     |
| :------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| <img src="/files/6l19tYft3fAocN0rWkOI" alt="DarkPro theme" data-size="original"> | <img src="/files/u2WxI5lFNwKwLr57NsE2" alt="Bubblegum theme" data-size="original"> | <img src="/files/bKb0PuN499agQGdcDyuk" alt="Neon theme" data-size="original"> |

|                                     Retro 95                                     |                                      Forest Glade                                     |                                      Editor                                     |
| :------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: |
| <img src="/files/pGQcL3v58Hiw95ieAI1t" alt="Retro95 theme" data-size="original"> | <img src="/files/TUT6SrKW5r6RuajVpire" alt="Forest Glade theme" data-size="original"> | <img src="/files/Jc9NNbsIeKzBcP6Mp5g0" alt="Editor theme" data-size="original"> |

The same sample settings panel, rendered by six different themes. The full catalog — with usage for each — is in [Available themes](#available-themes) below.

## Introduction

A **theme** is a per-backend NuGet package that restyles every default Gum Forms control with a single call. After calling `GumService.Default.Initialize(...)`, calling `<Name>Theme.Apply` swaps the default visuals for the theme's visuals — every `Button`, `TextBox`, `CheckBox`, `ComboBox`, etc. created afterward renders in that theme's style.

Themes ship one NuGet per rendering backend (for example `Gum.Themes.DarkPro.MonoGame`, `Gum.Themes.DarkPro.Kni`, and `Gum.Themes.DarkPro.Raylib`) so each package only carries the assets and references it needs.

{% hint style="warning" %}
All themes install and initialize KernSmith for dynamic font generation. Also, all themes except `Editor` install and initialize Apos.Shapes for vector art rendering. For more information see the [KernSmith](/gum/code/files-and-fonts/fonts/font-strategies.md#dynamic-kernsmith-generation) and [Apos.Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md) pages.
{% endhint %}

## Usage

Install the package matching your runtime, then call the theme's `Apply` after `Initialize`:

```csharp
using Gum.Themes.DarkPro;

protected override void Initialize()
{
    GumService.Default.Initialize(this, DefaultVisualsVersion.Newest);

    DarkProTheme.Apply(GraphicsDevice);

    var button = new Button();
    button.Text = "Click Me";
}
```

The pattern is the same for every theme — only the `using` namespace, NuGet package, and `Apply` call change. Pick a theme from the sections below, then copy the tab matching your rendering backend for a ready-to-paste install command and initialization snippet.

{% hint style="warning" %}
**Raylib theme packages are in preview.** Install them with the `--prerelease` flag, as shown in each theme's **Raylib** tab. The **MonoGame** and **KNI** packages are stable.

**`Apply` signature:** On **Raylib** — and on **MonoGame** / **KNI** packages from **June 2026 and later** — `Apply()` takes no arguments. On **MonoGame** / **KNI** packages from **May 2026 and earlier**, pass the `GraphicsDevice` as the MonoGame and KNI tabs below show: `Apply(GraphicsDevice)`.
{% endhint %}

A few things to keep in mind:

* **Apply one theme per app.** `Apply` mutates the default visuals — calling more than one theme's `Apply` in the same process produces a mix of leftover state.
* **Call `Apply` after `Initialize` and before constructing Forms controls.** Controls capture their visuals at construction time, so any control built before `Apply` will keep the default styling.
* **Themes compose with per-control styling.** For tweaking a single control on top of a theme, see [Code-Only Styling](/gum/code/styling/code-only-styling/styling-using-activestyles.md) and [Control Customization in Gum Tool](/gum/code/styling/control-customization-in-gum-tool.md).

## Available themes

### Editor

<figure><img src="/files/Jc9NNbsIeKzBcP6Mp5g0" alt="Editor theme preview"><figcaption><p>The Editor theme applied to a sample settings panel.</p></figcaption></figure>

Flat dark editor/tool chrome — intended for tool and editor interfaces rather than in-game UI. Ships with two extra controls beyond the standard Forms set: `PropertyGridVisual` and `Expander`. See the [Editor Theme](/gum/code/styling/themes/editor-theme.md) page for details on those controls.

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Editor.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Editor;

EditorTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Editor.Kni
```

```csharp
// Initialize
using Gum.Themes.Editor;

EditorTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Editor.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Editor;

EditorTheme.Apply();
```

{% endtab %}
{% endtabs %}

### DarkPro

<figure><img src="/files/6l19tYft3fAocN0rWkOI" alt="DarkPro theme preview"><figcaption><p>The DarkPro theme applied to a sample settings panel.</p></figcaption></figure>

Modern code-editor dark theme with a VS Code / JetBrains feel. Bundled fonts: DM Mono (body) and DejaVu Sans Mono (icons).

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.DarkPro.MonoGame
```

```csharp
// Initialize
using Gum.Themes.DarkPro;

DarkProTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.DarkPro.Kni
```

```csharp
// Initialize
using Gum.Themes.DarkPro;

DarkProTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.DarkPro.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.DarkPro;

DarkProTheme.Apply();
```

{% endtab %}
{% endtabs %}

### Bubblegum

<figure><img src="/files/u2WxI5lFNwKwLr57NsE2" alt="Bubblegum theme preview"><figcaption><p>The Bubblegum theme applied to a sample settings panel.</p></figcaption></figure>

Pastel pink casual-game look with rounded pill buttons and soft drop shadows. Bundled font: Nunito.

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Bubblegum.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Bubblegum;

BubblegumTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Bubblegum.Kni
```

```csharp
// Initialize
using Gum.Themes.Bubblegum;

BubblegumTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Bubblegum.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Bubblegum;

BubblegumTheme.Apply();
```

{% endtab %}
{% endtabs %}

### Forest Glade

<figure><img src="/files/TUT6SrKW5r6RuajVpire" alt="Forest Glade theme preview"><figcaption><p>The Forest Glade theme applied to a sample settings panel.</p></figcaption></figure>

Lush green nature-themed look with gradient leaf-shaped buttons (sharp top-left / bottom-right corners, rounded top-right / bottom-left), a deep canopy background, and soft text drop shadows. Bundled font: Nunito.

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.ForestGlade.MonoGame
```

```csharp
// Initialize
using Gum.Themes.ForestGlade;

ForestGladeTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.ForestGlade.Kni
```

```csharp
// Initialize
using Gum.Themes.ForestGlade;

ForestGladeTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.ForestGlade.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.ForestGlade;

ForestGladeTheme.Apply();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For the intended look, clear the back buffer to `ForestGladeColors.CanopyDeep`.
{% endhint %}

### Neon

<figure><img src="/files/bKb0PuN499agQGdcDyuk" alt="Neon theme preview"><figcaption><p>The Neon theme applied to a sample settings panel.</p></figcaption></figure>

Cyberpunk / neon-glow dark theme with a saturated cyan accent and a Gaussian glow on focus. Bundled fonts: Share Tech Mono (body), Orbitron (titles), and DejaVu Sans Mono (icons).

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Neon.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Neon;

NeonTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Neon.Kni
```

```csharp
// Initialize
using Gum.Themes.Neon;

NeonTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Neon.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Neon;

NeonTheme.Apply();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For the intended look, clear the back buffer to `NeonColors.Background` (`#060612`).
{% endhint %}

### Retro95

<figure><img src="/files/pGQcL3v58Hiw95ieAI1t" alt="Retro95 theme preview"><figcaption><p>The Retro95 theme applied to a sample settings panel.</p></figcaption></figure>

Windows 95 "Classic" battleship-gray chrome with raised/sunken bevels and navy selection. Bundled fonts: Nunito (MS Sans Serif stand-in) and DejaVu Sans Mono (icons).

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Retro95.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Retro95;

Retro95Theme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Retro95.Kni
```

```csharp
// Initialize
using Gum.Themes.Retro95;

Retro95Theme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Retro95.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Retro95;

Retro95Theme.Apply();
```

{% endtab %}
{% endtabs %}

### Meadow

<figure><img src="/files/bS9L5ftDyegWrMrINtG4" alt=""><figcaption><p>The Meadow theme applied to a sample settings panel.</p></figcaption></figure>

Cozy cottagecore look with chunky sky-blue pill buttons (flat "stacked card" drop shadow), dashed-outline cream panels, sage selection accents, and coral sliders. Bundled fonts: Baloo 2 (display), Quicksand (body), and DejaVu Sans Mono (icons).

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Meadow.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Meadow;

MeadowTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Meadow.Kni
```

```csharp
// Initialize
using Gum.Themes.Meadow;

MeadowTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Meadow.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Meadow;

MeadowTheme.Apply();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For the intended look, clear the back buffer to `MeadowColors.Cream` (`#F7EDD6`).
{% endhint %}

### Hazard

<figure><img src="/files/fURVG1tcAZnuW5N7KIAE" alt=""><figcaption><p>The Hazard theme applied to a sample settings panel.</p></figcaption></figure>

Industrial space-salvage HUD inspired by Hardspace: Shipbreaker — signature hazard-yellow on warm near-black, muted-gold borders, and square-cornered chrome. Pressing a button flashes the full hazard-yellow accent with black text. Bundled fonts: Saira Condensed (body and labels) and DejaVu Sans Mono (icons).

{% tabs %}
{% tab title="MonoGame" %}

```bash
dotnet add package Gum.Themes.Hazard.MonoGame
```

```csharp
// Initialize
using Gum.Themes.Hazard;

HazardTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="KNI" %}

```bash
dotnet add package Gum.Themes.Hazard.Kni
```

```csharp
// Initialize
using Gum.Themes.Hazard;

HazardTheme.Apply(GraphicsDevice);
```

{% endtab %}

{% tab title="Raylib" %}

```bash
dotnet add package Gum.Themes.Hazard.Raylib --prerelease
```

```csharp
// Initialize
using Gum.Themes.Hazard;

HazardTheme.Apply();
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
For the intended look, clear the back buffer to `HazardPalette.Background` (`#0A0A08`).
{% endhint %}

## Fonts and licensing

All bundled fonts are SIL Open Font License or the Bitstream Vera / DejaVu license — both permit redistribution. License files ship inside each NuGet.

## Supported backends

Themes are published for **MonoGame**, **KNI**, and **Raylib** (Raylib in preview — see the note under [Usage](#usage)). If you'd like to see a theme published for **FNA** or **Skia**, please open an issue or start a discussion on the [Gum GitHub repo](https://github.com/vchelaru/Gum).

## Requirements

* .NET 8.0+
* MonoGame 3.8+ (for the MonoGame packages), KNI (for the KNI packages), or Raylib (for the Raylib packages)
* [Gum.MonoGame](https://www.nuget.org/packages/Gum.MonoGame), [Gum.Kni](https://www.nuget.org/packages/Gum.Kni), or [Gum.raylib](https://www.nuget.org/packages/Gum.raylib)
* [KernSmith.MonoGameGum](https://www.nuget.org/packages/KernSmith.MonoGameGum) — optional, only needed when using runtime in-memory font generation


---

# 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/themes.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.