Theme Development for Flute CMS

Themes define the look and feel of the site: styles (SCSS), templates (Blade), scripts (JavaScript). Flute CMS supports theme inheritance — you can create your own theme based on the standard one and override only the necessary parts.

Quick Start

Create Theme Folder


app/Themes/mytheme/

Create theme.json


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

The extends: "standard" parameter means that all files not present in your theme will be automatically taken from the standard theme.

Add Your Changes

For example, to change the accent color, create the file assets/sass/theme/_variables.scss:


:root[data-theme=light] {
    --accent: #6366f1;
}
 
:root[data-theme=dark] {
    --accent: #818cf8;
}

Activate the Theme

In the admin panel: Settings → Themes → Select Theme → Activate

A minimal theme can consist of just two files: theme.json and _variables.scss. Everything else is automatically taken from the parent theme.

What Can Be Customized

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`
JavaScript	`assets/scripts/app.js`

Documentation Sections

Theme Structure CSS Variables SCSS System Blade Components Layouts JavaScript Theme Inheritance Creating a Theme

Clearing Cache

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.