1. Overview

This article describes how to apply a purchased theme in a project that consists of a NPM environment.

Sencha NPM requires Node 16 to run.
Please visit the site below to install Node16 for your OS and proceed.
https://nodejs.org/en/download

Applying a theme requires a few steps.

- Check The License Code
- Open The ExtJS Project
- Apply the theme file to your project
- Applying app.json
- Applying IndexHtmlPath File

0. Check The License Code

If you have purchased a theme, you should have received an email like this.
If you don't receive it, please contact us at support@ext-ui.com

In order to apply the theme, you will need the following items

- Theme Name
- License Key

This article assumes that you have purchased the theme-mercury-dark (Mercury Dark).

1. Open your ExtJS project

If you used Sencha CMD, you will have a workspace.json.

The ExtJS project folder is where the workspace.json file is located, as shown in the screenshot below.

2. Apply the theme file to the project

Create a packages folder and apply the purchased theme.
(If you already have a packages folder, you can apply it with the same path).

3. Applying app.json

Open app.json and you will see a section called “theme”.
Modify this section.

Edit "app.json"

{
{
  .
  .
  .
  
  "builds": {
    "desktop": {
      "toolkit": "classic",
      "theme": "theme-mercury-light", //Purchase Theme
      "sass": {
        "generated": {
          "var": "${build.id}/sass/save.scss",
          "src": "${build.id}/sass/save"
        }
      }
    }
  },
  .
  .
  .
  .
  

4. Applying indexHtmlPath File

Depending on your project, your indexHtmlPath may be different.
The path to indexHtmlPath is defined in app.json.
In this example, we'll assume that the indexHtmlPath is index.html.

For more information about indexHtmlPath, see Sencha Docs.

Copy and paste the code

Copy and paste the contents of Line 6 ~ 13 under the phrase "<-- The line below must be kept intact for Sencha Cmd to build your application -->"

0. In the Check The Licence Code section, you can enter the information provided.

- Theme Name
- License Key

   

  .
  .
  .
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    </script>
   <script type="text/javascript">
        var Ext = Ext || {};
        Ext.beforeLoad = function (tags) {
          <!-- Ext['Theme Name'] = 'LicenseKey'; -->
           Ext['theme-mercury-theme']='Using_this_{theme-mercury-light}_license_k.........'
        }
   }
    </script>
  
    <script id="microloader" data-app="" type="text/javascript" src="bootstrap.js"></script>
  .
  .
  .