How to Create Custom Themes for Your Pterodactyl Panel

The default Pterodactyl panel looks clean but generic. If you run a hosting business or a large gaming community, you want your panel to match your brand. Custom colors, your logo, maybe animated server icons or a custom background on the login page.

Pterodactyl's frontend is built with React and TypeScript. Customizing it requires rebuilding the frontend assets. Here is the full process.

---

Prerequisites

You need these tools installed on your panel server:

• Node.js v20 or newer (v22 recommended)
• Yarn package manager
• Git (to track your changes)

Install Node.js 22:

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

Install Yarn:

npm install -g yarn

---

Step 1: Navigate to the Frontend Source

The frontend source files live inside the panel installation:

cd /var/www/pterodactyl

The React source code is in the resources/scripts/ directory. The Tailwind CSS configuration is at the root level.

---

Step 2: Install Dependencies

yarn install

This downloads all required packages. If you get errors about incompatible Node versions, make sure you are on Node 20 or 22.

---

Step 3: OpenSSL Fix for Modern Systems

On Ubuntu 22.04+ or Debian 12+, you will hit a cryptographic error during the build:

Error: error:0308010C:digital envelope routines::unsupported

Fix this by setting the OpenSSL legacy provider:

export NODE_OPTIONS=--openssl-legacy-provider

Add this to your .bashrc so it persists:

echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.bashrc

---

Step 4: Make Your Changes

Here are the most common customizations:

Change brand colors:

Edit tailwind.config.js at the panel root. Find the colors section and modify the primary color values. The default uses a blue/gray palette.

theme: {
  extend: {
    colors: {
      cyan: {
        // Replace these hex values with your brand color
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
      }
    }
  }
}

Add a custom login background:

Place your background image in public/assets/ and edit the login page component at resources/scripts/components/auth/LoginContainer.tsx. Add a background style to the main wrapper div.

Replace the logo:

The panel logo is referenced in resources/scripts/components/NavigationBar.tsx and the login page. Replace the SVG or image reference with your own logo file.

Custom CSS overrides:

Create a file at resources/scripts/custom.css and import it into the main entry point at resources/scripts/index.tsx. Put any override styles here:

/* Custom panel background */
#app {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Custom server list cards */
.server-card {
  border-left: 3px solid #06b6d4;
}

---

Step 5: Build for Production

Compile the customized frontend:

yarn build:production

This generates optimized JavaScript and CSS bundles in the public/ directory. The build takes 30 seconds to 2 minutes depending on your server's specs.

---

Step 6: Clear Cache

After building, clear the Laravel view and config caches:

php artisan view:clear
php artisan config:clear

Reload the panel in your browser (Ctrl+Shift+R for a hard refresh) to see your changes.

---

Using Blueprint Framework (Alternative)

If you do not want to touch the source code directly, the Blueprint framework provides a modular extension system for Pterodactyl.

Install Blueprint:

cd /var/www/pterodactyl
# Follow the Blueprint installation guide at blueprint.zip

Popular Blueprint extensions:

• Recolor: Change the panel's color scheme through a GUI without rebuilding assets
• Nebula: A complete dark-mode theme overhaul
• Custom CSS: Inject CSS directly from the admin area

Blueprint extensions install with a single command and do not modify the core source files, making panel updates easier.

---

Tips for Clean Customization

1. Use Git. Before making any changes, initialize a Git repository in yours panel directory: git init && git add -A && git commit -m "stock panel". This lets you track every change and roll back if something breaks
2. Do not edit compiled files. The files in public/assets get overwritten on every build. Always edit the source files in resources/scripts/
3. Test on a staging server. Set up a second Pterodactyl instance for testing. Making frontend changes on a production panel while users are online is risky
4. Document your changes. Keep a changelog of what you modified. When Pterodactyl releases an update, you need to reapply your customizations after updating

Space-Node runs a fully customized Pterodactyl panel with branded themes, animated elements, and proprietary features. See it in action.