# Theming

## Base resources

Base resources for core are located in `/engine/resources/views`.

```
/engine
  /views
      Blade views for the core...
      /public
      /cp
      /admin
      /common
      /components
      /{MODULE_NAME}
```

Base resources for modules are located at `/engine/modules/{MODULE_NAME}/resources`

```
/engine
  /modules
    /{MODULE_NAME}
      /resources
        /css
          Stylesheets for the {MODULE_NAME} module ...
        /js
          JavaScript files for THE {MODULE_NAME} module ...
        /views
          Blade views for the {MODULE_NAME} module...
          /public
          /cp
          /admin
          /common
          /components
```

## Themes locations

Themes live in `/engine/themes/{themeName}` and may support all, some or none modules.

## Theme structure

```
/{THEME_NAME}
  /views
    Blade views for the core...
    /public
    /cp
    /common
    /components
    /{MODULE_NAME}
      Blade views for the {MODULE_NAME} module...
      /public
      /cp
      /common
      /components
  .gitignore
  package.json
  theme.php
  webpack.mix.js
```

As you may notice above, admin panel theming is not supported.

`theme.php` should return `App\View\Themes\Theme` instance:

```
<?php

return new App\View\Themes\Theme(
    'The theme name',
    'Description...',
    ['core', '{MODULE_NAME}'], // supported modules
);
```

## Views precedence

Module views are namespaced with a module name, meaning that if you want to load a `public/posts/index.blade.php` view from a Blog module, you would call `view('Blog::public.posts.index')`. Views for the core are located in a global namespace.

Views for the core will be loaded in the following order:
1. `/engine/themes/{activeTheme}/views/`,
2. `/engine/resources/views`.

Views for a module will be loaded in the following order:
1. `/engine/themes/{activeTheme}/views/{module}`,
2. `/engine/modules/{module}/resources/views`.

## Assets

Static assets for modules are stored in `/public_html/assets` folder.

```
/public_html
  /assets
    /css
      Stylesheets for core ...
      /{MODULE_NAME}
        Stylesheets for the {MODULE_NAME} module ...
    /js
      JavaScript files for core ...
      /{MODULE_NAME}
        JavaScript files for THE {MODULE_NAME} module ...
    /themes
      /{THEME_NAME}
        /css
          Stylesheets for core ...
          /{MODULE_NAME}
            Stylesheets for the {MODULE_NAME} module ...
        /js
          JavaScript files for core ...
          /{MODULE_NAME}
            JavaScript files for THE {MODULE_NAME} module ...
```