Create a Custom Theme

There are two ways to create a theme:

• With the create command: This is the preferred method to create a custom theme.

• By fetching active theme files: To know more, see Fetch the Active Theme.

When you use the create command to create a theme, maintaining and updating it is more efficient.

The new theme inherits files from the Base Theme and uses them to create a scaffolding for the new theme. Your custom theme automatically receives new features and updates made to the Base Theme. All you must do to take advantage of the new features is reactivate your theme.

The create command is defined by a new entry in the Themes manifest: "subtype": "fallback". After creating your theme, you can activate it using gulp commands or the extension manager. Then you can customize your theme further by changing the Sass and template files. For areas you customize, your theme pulls from your customized files. For areas you do not customize, your theme pulls from the Base Theme.

When creating a theme using the create command, consider the following:

• You can not add new templates or Sass to your custom theme; you must instead edit the existing files or add this customization using an extension.

• The assets folder is all or nothing. This means that you can either use all the assets from the Base Theme or all the assets from your custom theme. If you define an assets entry on the manifest.json of your custom theme, that is the assets folder that is used.

Prerequisites

Before you can create a custom theme, ensure that you complete the following tasks:

• Download and configure Set Up Theme Developer Tools.

• Install the Base Theme. It doesn't need to be activated. To learn how to install the base theme, see Anatomy of the Base Theme.

To create a custom theme:

1. Open a terminal or command line.

2. Access the top-level theme development directory you created when you downloaded developer tools.

3. Enter the following command:

   gulp theme:create

4. Follow the prompts to create the scaffolding of your new theme.

5. After the theme has been created, deployed, and activated, you can customize it.

To implement a custom theme

1. Open a terminal or command line.

2. Access the top-level theme development directory you created when you downloaded developer tools.

3. Enter the following command:

   gulp theme:deploy

4. To activate the new theme, enter the following command:

   gulp reactivate

   For more information, see Activating Themes and Extensions.

5. In the top-level theme development directory, open the Modules folder:

   Workspace/<THEME-DIRECTORY>/Modules/

6. In the Modules folder, create the folders that your custom theme will use.

7. In the new folder, create the files that your custom theme will override on the Base Theme.

   Tip:

   When you first deploy the custom theme, Base Theme files and custom theme files are downloaded. Look at and copy the Base Theme folders, and then paste them to the new theme folder. Change the name of the folder for your custom theme, but remember to retain the file names.

   Note:

   The file names must be the same as the file names for the Base Theme. Instead of using the Base Theme files, the custom theme will use the new files with the same name.

8. In the command line, enter the following command:

   gulp theme:local

   You can view the new theme locally and test the changes before deploying and activating the theme.

9. In the command line, enter the following command:

   gulp theme:deploy

10. In NetSuite, go to Commerce > Extensions > Extension Manager and activate your custom theme.

General Notices