Creating a Theme

Learn how to create custom themes for Paymenter to match your brand and design preferences.

Quick Start

1a. Create a New Theme (Recommended)

The easiest way to start is by using the built-in command:

php artisan app:theme:create

This command will:

• Copy the default theme as a starting point
• Set up the correct folder structure
• Update the vite.config.js file
• Update the theme.php configuration file with your theme name and author

1b. Alternative: Manual Setup

You can also create a theme manually by copying the themes/default folder and renaming it to your theme name.

You will need to update the build directory in vite.config.js.

3. Build Assets

You'll need to build your theme assets using Vite.

Building Assets

File Structure

All theme files are located in the themes/ directory:

themes/
├── your-theme/
│   ├── views/           # Blade templates
│   ├── resources/       # CSS, JS, and assets
│   ├── vite.config.js   # Vite configuration
│   └── theme.php        # Theme configuration

For a complete example, see the default theme structure.

Customizing Extension Views

You can override extension views by creating a vendor/ folder in your theme's views directory:

Format: vendor/<extension-type>/<extension-name>/<view-name>.blade.php

Example: To customize the Stripe payment modal (gateways.stripe::pay):

themes/your-theme/views/vendor/gateways/stripe/pay.blade.php

Adding admin configuration

You can add a configuration page for your theme in the admin panel by editing the theme.php file in your theme folder.

Example:

return [
    'name' => 'Your Theme Name',
    'author' => 'Your Name',
    'url' => 'https://yourwebsite.com',

    'config' => [
        [
            'name' => 'primary_color',
            'label' => 'Primary Color',
            'type' => 'color',
            'default' => '#3490dc',
            'description' => 'The primary color used throughout the theme.',
            'required' => true,
        ],
        [
            'name' => 'custom_css',
            'label' => 'Custom CSS',
            'type' => 'textarea',
            'default' => '',
            'description' => 'Add custom CSS to override default styles.',
            'required' => false,
        ],
    ],
];

You can then access the configuration in your theme using:

$primaryColor = theme('primary_color', '#3490dc');

This will return the value set in the admin panel or the default value if none is set.

Read this to learn more about the available input fields and options.