Skip to main content

​
Installation

Theme Raed gets installed by default when you install the Twilight Themes engine. Twilight can be installed in two ways: through the Salla Partners Portal or through the Salla CLI.
Either installation method will trigger the installation of both the Twilight Engine and Theme Raed together.

​
Installation methods

Salla Partners Portal

Install through the web interface - easiest for beginners

Salla CLI

Install via command line - preferred for developers

​
Via Salla Partners Portal

The Salla Partners Portal provides a user-friendly interface for creating and managing themes.
1

Access the Partners Portal

Navigate to Salla Partners Portal and sign in with your partner account.
Don’t have a partner account? Register here to get started.
2

Create a new theme

Follow the theme creation wizard in the Partners Portal. The system will automatically:
  • Initialize the Twilight engine
  • Install Theme Raed as your starter theme
  • Set up the necessary configurations
For detailed instructions, refer to the official documentation on creating themes via Partners Portal.
3

Connect to a demo store

Select or create a demo store where your theme will be installed and tested.
4

Access your theme

Once created, you can access your theme files and begin customization through the Partners Portal interface or by cloning the repository.

​
Via Salla CLI

The Salla CLI is the recommended method for developers as it provides powerful tools for theme development and preview.
1

Install Salla CLI

First, ensure you have Node.js installed, then install the Salla CLI globally:
npm install -g @salla.sa/cli
The CLI requires Node.js version 14 or higher.
2

Authenticate with Salla

Log in to your Salla partner account through the CLI:
salla login
Follow the prompts to authenticate your account.
3

Create a new theme

Use the CLI to create a new theme project:
salla theme create
The CLI will:
  • Prompt you for theme details (name, description, etc.)
  • Install the Twilight engine
  • Set up Theme Raed as your starter theme
  • Initialize a Git repository
  • Install all required dependencies
4

Navigate to your theme directory

Change to your newly created theme directory:
cd your-theme-name
For complete CLI documentation, visit the Salla CLI installation guide.

​
Post-installation setup

After installing Theme Raed, complete these setup steps:
1

Install dependencies

Theme Raed uses pnpm as its package manager. Install all dependencies:
pnpm install
This theme enforces the use of pnpm. If you try to use npm or yarn, the preinstall script will prevent the installation.
2

Build the theme

Compile the theme assets for development:
pnpm run development
Or for production-ready builds:
pnpm run production
3

Start the development server

Enable live preview of your theme during development:
salla theme preview
Or use the alias:
salla theme p
You must be in the theme’s root folder to run the preview command.

​
Theme preview

Using the Salla CLI, you can preview your theme in real-time as you develop. The preview command allows you to see live updates to your theme on a demo store.

​
How preview works

  1. The CLI connects to your selected demo store
  2. Your theme is loaded in the browser
  3. As you make changes to files, they’re automatically synced
  4. The store updates instantly to reflect your changes

​
Running preview mode

Terminal
salla theme preview

# Alias command for preview
salla theme p
The CLI will:
  • List your available demo stores
  • Let you select which store to preview
  • Open the store in your default browser
  • Watch for file changes and sync them automatically
Preview mode is an excellent option for developers who want to see live updates to their themes appearing on the store right away.

​
Development workflow

Once installed, here’s a typical development workflow: 
# Watch for changes and rebuild automatically
pnpm run watch

# In another terminal, start preview
salla theme preview

​
Available npm scripts

  • pnpm run production - Build minified, optimized files for production
  • pnpm run prod - Alias for production build
  • pnpm run development - Build files with source maps for debugging
  • pnpm run watch - Watch mode for automatic rebuilding during development

​
Verify installation

To confirm Theme Raed is installed correctly:
1

Check directory structure

Verify the following directories exist:
ls -la src/
# Should show: assets, locales, views
2

Check configuration file

Ensure twilight.json exists in the root directory:
cat twilight.json
You should see the theme name “Theme Raed” and configuration details.
3

Verify dependencies

Check that all packages are installed:
pnpm list
Key packages should include:
  • @salla.sa/twilight
  • @salla.sa/twilight-components
  • tailwindcss
  • webpack
4

Test build process

Try building the theme:
pnpm run development
The build should complete without errors.

​
Troubleshooting

​
Package manager errors

If you see “Use ‘pnpm’ for installing packages”, make sure to use pnpm instead of npm or yarn.
# Install pnpm globally if needed
npm install -g pnpm

# Then install dependencies
pnpm install

​
Build failures

If the build fails, try:
  1. Clear the node_modules and reinstall: 
    rm -rf node_modules
pnpm install
  2. Clear webpack cache: 
    rm -rf dist
pnpm run development

​
Preview not working

If preview mode doesn’t work:
  1. Ensure you’re logged in: 
    salla login
  2. Verify you’re in the theme root directory
  3. Check that you have at least one demo store in your partner account

​
Next steps

Now that Theme Raed is installed, you can:

Customize components

Start modifying the pre-built components in src/views/components/

Configure theme settings

Edit twilight.json to enable/disable features and customize settings

Modify styles

Customize TailwindCSS configuration in tailwind.config.js

Read the docs

Explore the complete Twilight Themes documentation

​
Additional resources

Build docs developers (and LLMs) love

Get started for freeTalk to us