Themes

In this section we'll teach you how to create a new theme, reference a theme view, and add theme options for your particular theme.

• Create a Theme
• Theme Views
• Theme Options
• Theme Assets

Create a Theme

In order to create a theme, you will need to create a new folder inside of resources/views/themes. Let's call this folder sample-theme. Then inside of this folder we need a matching filename called sample-theme.json:

{
    "name": "Sample Theme",
    "version": "1.0"
}

Now, if you visit /admin/themes, you'll see this new theme available to activate.

You may see a broken image in the admin if you do not have an image for that theme. Inside of your theme folder you will need a .jpg file with the same name as the folder sample-theme.jpg (recommended 800x500px)

Theme Views

After activating a theme you can render any view file.blade.php or file.php by calling theme::file.

For instance, if we created a new file inside our sample theme at resources/views/themes/sample-theme/home.blade.php we could then return the view in a controller like so:

public function home(){
    return view('theme::home');
}

Or, you could do this inside of your route file:

Route::view('/', 'theme::home');

Theme Options

Every theme can include options such as logo, color scheme, etc... You can choose to program any amount of options into your theme.

In order to create an options page for your theme you need to create a new file inside your theme folder called options.blade.php. As an example take a look at the Tailwind theme options located at resources/views/themes/tailwind/options.blade.php, you will see a snippet similar to:

<div id="branding" class="tab-pane fade in active">

    {!! theme_field('image', 'logo', 'Site Logo') !!}

    {!! theme_field('image', 'footer_logo', 'Footer Logo') !!}

</div>

This will allow us to create some dynamic theme fields. This is powered by the DevDojo Themes Package. You can easily create input fields for your theme options.

For more information about the different type of fields be sure to visit the themes package located at https://github.com/thedevdojo/themes

Theme Assets

The current themes use Webpack to mix their assets. In order to run the assets for each theme you will need to go into the theme folder and run:

npm run watch

Additionally, to compile the assets and make them production ready, you'll need to use:

npm run production

Before compiling assets in each theme you may need to include the asset dependencies by running npm install inside of the theme folder.

Now, you can quickly and easily create configurable themes for your application 🎉