Themes

Introduction

A theme changes the Panel's colors, corner roundness, and console colors. It is a small folder with a CSS file, so it needs no frontend build and 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 Panel's themes directory. 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:

theme.json

{
    "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 in a .dark block:

tokens.css

.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;
}

Set only the tokens you want to change. Colors can use any CSS color format, such as oklch() or #hex.

Images and Fonts

Put images and fonts in an assets folder inside the theme. They are published to /assets/theme/. tokens.css is an ordinary stylesheet, so you can add your own rules:

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

Tokens hold only colors and sizes, not images.

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 tokens.css to public/assets/theme.css and the assets folder to public/assets/theme. The theme loads after the Panel's styles, so its values win. Reload the Panel in your browser to see it.

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

To restore the Panel's own look, run:

php artisan p:theme:reset

Only one theme applies at a time, and users cannot choose their own.

Tokens

A theme may set these tokens.

Colors

Token	Controls
`--background`	The page background.
`--foreground`	Main text and icons.
`--muted-foreground`	Less important text.
`--card`, `--card-foreground`	Cards, panels, table rows, and their text.
`--popover`, `--popover-foreground`	Dialogs, dropdown menus, and their text.
`--muted`	Quiet backgrounds, such as code blocks.
`--primary`, `--primary-foreground`	Main buttons and their text.
`--secondary`, `--secondary-foreground`	Secondary buttons and their text.
`--accent`, `--accent-foreground`	Links, active items, and highlights.
`--border`	Borders and dividers.
`--input`	Borders and backgrounds of form fields.
`--ring`	The outline around focused elements.
`--destructive`, `--success`, `--warning`	Error, success, and warning messages and buttons. Each has a matching `-foreground` token for its text.
`--chart-1` to `--chart-5`	Charts and generated avatars.

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

Shape

Token	Controls
`--radius`	How round corners are. The default is `0.5rem`; other corner sizes derive from it.

Console

Token	Controls
`--terminal-background`	The console's background.
`--terminal-selection`, `--terminal-selection-foreground`	Selected text in the console.
`--terminal-ansi-black` to `--terminal-ansi-white`	The eight standard console colors: `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, and `white`.
`--terminal-ansi-bright-black` to `--terminal-ansi-bright-white`	The eight bright console colors.

Console colors apply the next time the console opens.

On this page