Overview

Starting with v1.10.0, Light Store can be easily themed using the theme system. Themes are written in React and Tailwind CSS.

Creating a theme directory

You may bootstrap a new theme directory using the convinience command:

php artisan app:create-theme {theme-name}

docker compose exec php artisan app:create-theme {theme-name}

Set your theme

Navigate into the Admin Panel -> Settings -> Customization -> Theme (Section) and select your new theme.

Save the settings afterwards.

Editing locally

If you have the store set up locally for development, you may simply edit your desired theme at resources/themes/{theme-name}. When running composer run dev, the Vite dev server will be ran, adding hot-module reloading to your site, making changes instant.

Connecting a code editor

If your store is hosted on a remote server, you may connect a code editor over SSH.

Using VS Code

1. Follow the steps to use a remote SSH VS Code instance: https://code.visualstudio.com/docs/remote/ssh.
2. Once connected, access your theme directory at {your-store-instance}/resources/themes/{theme-name}.
   • {your-store-instance} will likely be /var/www/store or ~/store depending on where you placed your app during hosting.
3. You may start editing your theme files.
4. To rebuild React & see changes, run in the remote terminal:

npm run build

docker compose exec npm run build

Using PhpStorm or other JetBrains IDEs

1. Open your remote project at {your-store-instance}/resources/themes/{theme-name} in your JetBrains IDE over SSH: https://www.jetbrains.com/help/phpstorm/remote-development-starting-page.html.
2. You may start editing your theme files.
3. To rebuild React & see changes, run in the remote terminal:

npm run build

docker compose exec npm run build