Skip to main content

Writing Themes

Getting Started​

To start writing a theme you need to create a new theme, this can either be done by copying an existing theme and editing the theme.json file or via the $ php artisan theme:create command.

Folder Structure​

themes/
└── <your-theme>/
    ├── assets/
    ├── lang/
    ├── views/
    │   ├── fight.blade.php
    │   ├── index.blade.php
    │   └── player.blade.php
    ├── config.php
    ├── preview.jpg
    └── theme.json

Theme Manifest​

The theme manifest holds details within the theme such as name, description, author, and version.

Example theme manifest:

{
    "name": "Cosmo",
    "description": "A galactic theme.",
    "author": "LegendEffects",
    "version": "1.0.0",
}

Theme manifests can also have feature flags that can be any key-value pair, these are only likely to be useful if you're developing a module alongside your theme; however, by default there is a pagination_type flag for Laravel's pagination generator.

{
    "name": "Cosmo",
    "description": "A galactic theme.",
    "author": "LegendEffects",
    "version": "1.0.0",
    "flags": {
        "pagination_type": "bootstrap", // Can be bootstrap, bootstrap_3, tailwind
        "demo_options": [
            {
                "type": "color_picker",
                "schema": "r,g,b",
                "target": "--accent",
                "label": "Accent Colour"
            }
        ]
    }
}

Theme Syntax​

Themes are written in Laravel Blade Templates with multiple helpers and available variables per page; if you would like more in-depth integration then you can write a module

Asset Management​

The entire themes folder is symlinked upon deployment to public, to help resolve paths to here you can use the theme asset helper.

<head>
    ...
    <link rel="stylesheet" href="{{theme_asset('vendor/bootstrap/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{theme_asset('vendor/datatables/css/datatables.min.css')}}">
    <link rel="stylesheet" href="{{theme_asset('style.css')}}">
    ...
</head>