Themes

Introduction

A theme changes how the Panel looks: its colors, the roundness of its corners, and the colors of the server console. It is a small folder with a CSS file, so you do not need to build the Panel's frontend, and a theme keeps working when you update the Panel.

Themes only change appearance. To add pages or features, use an extension.

Creating a Theme

Themes live in the themes directory of the Panel. Each theme is a folder with two files:

/var/www/pterodactyl/themes/
└── midnight/
    ├── theme.json
    └── tokens.css

theme.json names the theme. Its id must match the folder's name, start with a letter, and use only lowercase letters, numbers, and dashes:

{
    "id": "midnight",
    "name": "Midnight",
    "version": "1.0.0"
}

name and version are optional.

tokens.css sets the colors you want to change. The Panel uses its dark colors by default, so put your values inside a .dark block:

.dark {
    --background: oklch(0.2 0.03 265);
    --card: oklch(0.26 0.03 265);
    --primary: oklch(0.65 0.2 300);
    --accent: oklch(0.75 0.15 200);
    --radius: 0.25rem;
}

You only need to set the tokens you want to change. Colors may use any CSS color format, such as oklch() or #hex.

Images and Fonts

To use images or fonts in your theme, put them in an assets folder inside the theme. They are published to /assets/theme/. tokens.css is an ordinary stylesheet, so you may also add your own rules to it:

body {
    background-image: url('/assets/theme/background.png');
    background-size: cover;
}

Tokens only hold colors and sizes, so do not put images in them.

Applying a Theme

List the themes the Panel can find:

cd /var/www/pterodactyl
php artisan p:theme:list

Apply one by its ID:

php artisan p:theme:apply midnight

This copies the theme's tokens.css to public/assets/theme.css, and its assets folder to public/assets/theme. The Panel loads the theme after its own styles, so the theme's values win. Reload the Panel in your browser to see it.

After you change a theme's files, run p:theme:apply again.

To go back to the Panel's own look, run:

php artisan p:theme:reset

Only one theme is applied at a time, and users cannot choose a theme themselves.

Tokens

These are the tokens a theme may set.

Colors

The --sidebar tokens, such as --sidebar and --sidebar-accent, follow the matching tokens above by default.

Shape

Console

Console colors take effect the next time the console opens.