Theme Structure

A theme is a set of files that define the look and feel of the site: styles (SCSS), templates (Blade), scripts (JS). Themes are located in the app/Themes/ folder.

Full Structure

- theme.json
- colors.json
- - - app.scss

Minimal Theme

If you only need to change colors, a minimal set of files is sufficient:

- theme.json
- - - - _variables.scss

Everything else is automatically taken from standard due to inheritance.

Configuration theme.json

Basic Configuration


{
    "name": "My Theme",
    "version": "1.0.0",
    "author": "Your Name",
    "description": "Theme description",
    "extends": "standard"
}

Extended Configuration


{
    "name": "My Theme",
    "version": "1.0.0",
    "author": "Your Name",
    "description": "Customized theme",
    "extends": "standard",
    
    "settings": {
        "show_sidebar": {
            "name": "Show Sidebar",
            "description": "Enable sidebar",
            "value": true
        }
    },
    
    "layout_arguments": {
        "containerWidth": "1400px"
    },
    
    "replacements": {
        "shop::pages.catalog": "mytheme::shop.catalog"
    }
}

theme.json Parameters

Parameter	Description
`name`	Display name of the theme
`version`	Version (semver)
`author`	Author
`description`	Description
`extends`	Parent theme to inherit from
`settings`	Settings available in the admin panel
`layout_arguments`	Variables available in all templates
`replacements`	Replacement of module templates

Including SCSS and JS

SCSS

The main file assets/sass/app.scss is automatically compiled and included. Use the @at directive to include it in templates:


@at(tt('assets/sass/app.scss'))

The tt() function returns the path to the current theme.

JavaScript

The file assets/scripts/app.js is included automatically:


@at(tt('assets/scripts/app.js'))

On a Specific Page


@push('styles')
    @at('Modules/Shop/Resources/assets/scss/shop.scss')
@endpush
 
@push('scripts')
    @at('Modules/Shop/Resources/assets/js/shop.js')
@endpush

What Can Be Overridden

To Change	File to Create
Colors and variables	`assets/sass/theme/_variables.scss`
Any component	`views/components/{name}.blade.php`
Header	`views/layouts/header.blade.php`
Footer	`views/layouts/footer.blade.php`
Entire layout	`views/layouts/app.blade.php`
Button styles	`assets/sass/components/_buttons.scss`
Any element styles	`assets/sass/app.scss`
JavaScript	`assets/scripts/app.js`

When overriding a file, the system first looks for it in your theme, then in the parent theme, and only then in the standard theme.

colors.json File

Optional file for the page editor in the admin panel:


{
    "light": {
        "--background": "#ffffff",
        "--secondary": "#f8fafc",
        "--accent": "#007aff",
        "--text": "#1a1a2e"
    },
    "dark": {
        "--background": "#121212",
        "--secondary": "#1e1e1e",
        "--accent": "#0a84ff",
        "--text": "#e0e0e0"
    }
}

Debugging

After changes in the theme, cache clearing might be required:


php flute template:cache:clear
php flute cache:clear

In development mode, SCSS is recompiled automatically when files change.