Frappe Theme Studio

Install Frappe Theme Studio

bench get-app https://github.com/Osamah-sami/frappe_theme_studio

Add the Frappe Gems badge to your README

Maintain Frappe Theme Studio? Paste this into your README:

[![Listed on Frappe Gems](https://frappegems.com/api/method/frappe_gems.seo.badge?app=Osamah-sami%2Ffrappe_theme_studio)](https://frappegems.com/gems/apps/Osamah-sami/frappe_theme_studio)

About Frappe Theme Studio

Frappe Theme Studio

Visual drag-and-drop theme editor for Frappe/ERPNext built on the native Frappe Design System.

Requirements

  • Frappe Framework >= v16.0.0
  • Python >= 3.14
  • NodeJS >= 24

Note for v16: Desk Page has been removed in Frappe v16. After installation, manually create a Workspace and add shortcuts to "Theme Gallery" and "Theme Editor" pages.

Features

  • Theme Profiles: Light, Dark, High Contrast, Frappe Default, Frappe v16 (Espresso), Blue Ocean, Orange Sunset, Custom
  • Visual Editor: Live preview on Dashboard, Form, Table, and Login screens
  • Full Component Control: Colors, Typography, Layout, Buttons, Sidebar, Navbar, Cards, Tables
  • Responsive Preview: Desktop / Tablet / Mobile + Compare with Frappe Default
  • Assignment: Site-wide, Per-User, Per-Role, Per-Company
  • Draft & Publish: Save drafts, undo/redo, version history, backup & restore
  • Accessibility: WCAG AA compliance, high contrast, large text, color-blind palettes
  • Developer Tools: Custom CSS/JS, CSS variables, DocType rules, raw JSON
  • System Presets: Built-in Frappe v16 (Espresso), Blue Ocean, Orange Sunset themes
  • Theme Gallery: Visual gallery to browse, preview, apply, edit, duplicate and export themes

Installation

bench get-app https://github.com/Osamah-sami/frappe_theme_studio
bench --site yoursite.com install-app frappe_theme_studio
bench --site yoursite.com migrate
bench build --app frappe_theme_studio
bench restart

Post-Installation (v16 Required)

Since Desk Page is deprecated in v16, create a Workspace manually:

  1. Go to Workspace List (or type "Workspace" in Awesome Bar)
  2. Create a new Workspace named "Theme Studio"
  3. Add Shortcuts:
    • Link to Page: theme-studio-gallery (label: "Theme Gallery")
    • Link to Page: theme-studio-editor (label: "Theme Editor")
    • Link to DocType: Theme Profile
    • Link to DocType: Theme Assignment
    • Link to DocType: Theme Studio Settings
  4. Set the Workspace as Public so all users can access it

Usage

  • Press Ctrl+K and search "Theme Gallery"
  • Or navigate to /desk/theme-studio-gallery

Theme Editor

  • From the Gallery, click Edit on any theme
  • Or navigate to /desk/theme-studio-editor
Page Route
Theme Gallery /desk/theme-studio-gallery
Theme Editor /desk/theme-studio-editor

License

MIT

Related Themes apps for Frappe & ERPNext

  • Business Theme V14 — Business Theme for Frappe / ERPNext v14
  • Bluetheme — Custom Theme for ERPNext v12 with new Desk 2.0
  • Frappe Desk Theme — A comprehensive theming solution for FrappeERPNext desk interface that allows complete customization of the user interface appearance.
  • Frappe Theme — Theme for Frappe sites
  • Portal Theme — Theme your entire Frappe portal — navbar, cards, login page, and more.
  • Owl Theme — Take full control of your Frappe/ERPNext app. Customize backgrounds, logos, and colors with ease.
  • Redtheme V13B — Custom theme for ERPNext/Frappe version 13-beta
  • Whitetheme V13 — Custom Theme for Frappe/ERPNext v13