Themes

Overview

Lamotivo Theme Manager is a Laravel package to manage themes in your application.

It allows you to organize your views and assets in separate directories.

Main features:

Separation of views and assets in theme directories.
Theme inheritance.
Integration with Lamotivo Asset Manager.

Installation

Require the package:

composer require lamotivo/themes

Publish a configuration file:

php artisan vendor:publish --provider="Lamotivo\Themes\ThemeServiceProvider" --tag=config

Configuration

Theme Structure

Default themes location:

resources/themes

You are free to set your own location in the themes.php configuration file.

Directory structure for a theme named red:

resources/themes/red/views
resources/themes/red/assets/js
resources/themes/red/assets/css
resources/themes/red/assets/public

Views from themes have an advantage over resources/views.

They also override namespaced views.

Using Theme

You may activate a theme using the following:

on run time:

Theme::activate('red');

using the middleware at app\Http\Kernel.php:

protected $middlewareGroups = [
    'web' => [
        // ...
        \Lamotivo\Themes\Middleware\UseTheme::class,
    ],
];

protected $routeMiddleware = [
    // ...
    'theme' => \Lamotivo\Themes\Middleware\UseTheme::class,
];

at the .env file:

ACTIVE_THEME=red
AUTO_ACTIVATE_THEME=true

Then you may use it in your routes:

Route::group([
    'prefix' => '/red-theme',
    'middleware' => 'theme:red',
], function() {
    // ...
});

Theme Assets

Theme public assets are located at the public/vendor/themes directory by default. You can override the vendor/themes prefix in the themes.php configuration file.

To access assets from HTML you should create symbolic links to your themes.

Use the themes:link Artisan command to achieve this:

php artisan themes:link

This will create links for each registered theme from public/vendor/themes/* to resources/themes/*/assets/public.

In your Blade views you can use the @theme_url Blade helper:

<img src="@theme_url('some-image.jpg')">

The example above will produce code like that:

<img src="/vendor/themes/red/some-image.jpg">

Sometimes you may want to fetch some asset from a fixed theme like so:

<img src="@theme_url('some-image.jpg', 'winter')">

The example above will produce code like that:

<img src="/vendor/themes/winter/some-image.jpg">

If the active theme extends from another one, assets are also inherited.

Handling JS and CSS/SCSS Assets

By default all JS and CSS assets are placed in the assets/js and assets/css directories relatively to the theme location.

You can use any other structure to your liking.

We use Lamotivo Asset Manager to handle assets.

In your Blade views you can use code like this:

@asset_add('js/some-script.js')
@asset_add('js/another-script.js')
@asset_add('css/some-styles.scss')
<!DOCTYPE html>
<html>
<head>
    <title></title>
    @asset_css
</head>
<body>
    <!-- ... -->
    @asset_js
</body>
</html>