Skip to main content
This guide walks you through setting up your development environment to work with Theme Raed.

​
Prerequisites

Before you begin, ensure you have the following:
Theme Raed enforces the use of pnpm as the package manager. The preinstall script will prevent installation with npm or yarn.

​
Installation

Theme Raed can be installed in two ways:
1

Install Salla CLI

Install the Salla CLI globally using npm:
npm install -g @salla.sa/cli
2

Create a new theme

You can create a theme either through the Salla Partners Portal or via the CLI:
salla theme create
This will install the Twilight Engine along with Theme Raed as the default starter theme.
3

Install dependencies

Navigate to your theme directory and install the required packages:
cd your-theme-directory
pnpm install

​
Directory structure

Theme Raed follows a structured organization: 
+---src
    +---assets
    |   +---images      # Theme images and graphics
    |   +---js          # JavaScript files
    |   +---styles      # SCSS/CSS stylesheets
    +---locales
    |       ar.json     # Arabic translations
    |       en.json     # English translations
    +---views
        +---components  # Reusable UI components
        +---layouts     # Layout templates
        +---pages       # Page templates
        +---partials    # Partial templates

​
Key directories

  • assets/js: Contains all JavaScript modules, including page-specific scripts and reusable components
  • assets/styles: SCSS files with Tailwind CSS configuration
  • views/components: Twig components for theme features and custom components
  • views/pages: Main page templates (cart, product, blog, etc.)
  • views/layouts: Master layout template that wraps page content

​
Configuration files

Theme Raed includes several configuration files:

​
package.json

Defines project dependencies and npm scripts: 
{
  "name": "theme-raed",
  "version": "1.0.3",
  "scripts": {
    "production": "webpack --mode production",
    "development": "webpack --mode development",
    "watch": "webpack --mode development --watch"
  }
}

​
twilight.json

Configures theme metadata, features, and components. This file defines:
  • Theme name and repository
  • Supported features (mega-menu, fonts, color, breadcrumb, etc.)
  • Custom components and their settings
  • Theme settings exposed in the Salla Partners Portal
Do not modify the twilight.json file structure unless you understand how it affects theme functionality and the Partners Portal interface.

​
tailwind.config.js

Customizes Tailwind CSS for the theme: 
module.exports = {
  content: [
    "src/views/**/*.twig",
    "src/assets/js/**/*.js",
    'node_modules/@salla.sa/twilight-tailwind-theme/safe-list-css.txt',
  ],
  darkMode: 'class',
  plugins: [
    require('@salla.sa/twilight-tailwind-theme'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
  ],
}

​
webpack.config.js

Handles asset bundling and compilation. See the Build process page for details.

​
Next steps

Preview mode

Learn how to preview your theme during development

Build process

Understand the build system and webpack configuration

Customization

Customize the theme to match your brand

Build docs developers (and LLMs) love

Get started for freeTalk to us