Overview

Larapen's theme system allows you to completely change the look and feel of your website by installing different themes. Each theme provides its own layouts, styles, and design philosophy while using the same content and data.

Available themes

Larapen offers multiple themes, each with a distinct visual identity:

ThemeDescriptionAvailability
DefaultClean, modern, professional with wide layout and balanced whitespace.Included with the core app
AtriumFully interactive, motion-rich theme for architects, designers, galleries and museums, with elastic type and a draggable collection wall.Sold separately
CanopyImmersive, cinematic theme for premium real estate, residences and hotels, with a monumental serif wordmark and organic image masks.Sold separately
ContourWarm, crafted theme for architecture firms, interior designers and builders, with animated contour lines and an offset project mosaic.Sold separately
CreativeBold, creative, asymmetric layouts for freelancers and agencies.Sold separately
ElegantElegant, editorial-style with refined typography and magazine-inspired grid.Sold separately
KeystoneSolid, structured theme for construction companies, contractors, architecture and engineering firms, with strong condensed type, project grids and almost no animation.Sold separately
MinimalistClean, minimal design with generous whitespace, focused on content and simplicity.Sold separately
OliveNature-inspired, warm-toned theme with organic shapes and earthy colors.Sold separately
SkylineCinematic, scroll-driven theme for real estate agencies, brokers and developers, with a sky hero you rise through and a wordmark filled with a photo.Sold separately
StudioModern SaaS landing theme with a mega-menu navbar, an animated hero and full light and dark mode.Sold separately
VellumTechnical, blueprint-inspired theme for engineering studios, SaaS and product teams, with drafting type and lines drawn by scroll.Sold separately
Note: Only the Default theme is included with the core Larapen application. All other themes are sold separately as additional purchases from the Larapen Marketplace.

Installation methods

Method 1: Via the admin panel (recommended)

  1. Log into your admin panel at https://yoursite.com/admin.
  2. Go to Appearance → Themes.
  3. Click "Upload Theme".
  4. Select the theme ZIP file and click Upload.
  5. The system will extract the theme to extensions/themes/{theme-name}/ and register it.
  6. The new theme will appear in the themes list.

Method 2: Via FTP/File Manager (manual)

  1. Download the theme package (ZIP file).
  2. Extract the ZIP file on your local computer.
  3. Upload the extracted theme folder to extensions/themes/ on your server. For example:
    • extensions/themes/atrium/
    • extensions/themes/canopy/
    • extensions/themes/contour/
    • extensions/themes/creative/
    • extensions/themes/elegant/
    • extensions/themes/keystone/
    • extensions/themes/minimalist/
    • extensions/themes/olive/
    • extensions/themes/skyline/
    • extensions/themes/studio/
    • extensions/themes/vellum/
  4. Log into the admin panel.
  5. Go to Appearance → Themes.
  6. Click "Sync" to detect the newly uploaded theme.

Method 3: Via SSH (command line)

# Extract the theme to the extensions directory
unzip creative-theme.zip -d extensions/themes/creative/

# Publish theme assets (symlinks to public/themes/)
php artisan theme:publish creative

# Build theme assets (compile SCSS/JS)
npx vite build

Theme directory structure

Each theme follows a standardized structure inside extensions/themes/{theme-name}/:

extensions/themes/creative/
├── theme.json              ← Manifest (name, version, colors, settings)
├── assets/
│   ├── css/                ← Compiled CSS
│   ├── js/                 ← JavaScript files
│   ├── scss/               ← SCSS source files
│   └── images/             ← Theme images and icons
├── views/
│   ├── layouts/
│   │   └── master.blade.php    ← Main layout template
│   ├── pages/              ← Page templates
│   ├── partials/           ← Reusable components (header, footer, nav)
│   └── components/         ← Blade components
└── config.php              ← Theme-specific settings defaults

Activating a theme

  1. Go to Appearance → Themes in the admin panel.
  2. You'll see all installed themes with preview thumbnails.
  3. Click "Activate" on the theme you want to use.
  4. The theme change takes effect immediately; visit your website to see it.
Note: Only one theme can be active at a time. Activating a new theme automatically deactivates the previous one. Your content, settings, and data are not affected; only the visual presentation changes.

After installation

Build theme assets

After installing a new theme, you may need to build its compiled CSS/JS assets:

  1. Go to Appearance → Themes.
  2. Click "Build" next to the new theme.
  3. Wait for compilation to complete.

Or via SSH:

npx vite build

Configure theme settings

  1. Go to Appearance → Theme Settings.
  2. Customize colors, fonts, layout options, and other theme-specific settings.
  3. Click Save. Changes take effect immediately.

Theme + add-on compatibility

Themes can provide custom views for installed add-ons. For example, the Creative theme might style blog posts differently than the Default theme. If a theme does not provide views for a specific add-on, the add-on's built-in default views are used automatically.

Managing themes

Previewing a theme

Before activating a theme, you can preview it:

  1. Go to Appearance → Themes.
  2. Click "Preview" on any installed theme.
  3. A live preview opens in a new tab, showing your actual content with the new theme's design.

Removing a theme

  1. Make sure the theme you want to remove is not the active theme. Switch to a different theme first.
  2. Go to Appearance → Themes.
  3. Click "Delete" next to the inactive theme.
  4. Confirm the deletion. This removes the theme files from extensions/themes/.
Note: You cannot delete the currently active theme or the Default theme (which serves as the system fallback).

Troubleshooting

Theme not appearing after upload

  • Verify the folder structure: extensions/themes/{name}/theme.json must exist.
  • Click "Sync" on the Themes page to re-scan.
  • Check that the theme.json file is valid JSON.

Missing styles or broken layout

  • Build the theme assets: Appearance → Themes → Build.
  • Clear the browser cache with a hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
  • Clear the application cache: Settings → Cache → Clear All.

Theme images not loading

  • Run the theme asset publish command to create the correct symlinks: via SSH: php artisan theme:publish {theme-name}
  • Check that the public/themes/{theme-name}/ symlink exists and points to the correct directory.

Was this article helpful?

Thank you for your feedback!

Still need help? Create a support ticket

Create a Ticket