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 cannot 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.
To create a custom theme:
- Open a terminal or command line.
- Access the top-level theme development directory you created when you downloaded developer tools.
- Enter the following command:
gulp theme:create - Follow the prompts to create the scaffolding of your new theme.
- After the theme has been created, deployed, and activated, you can customize it.
To implement a custom theme
- Open a terminal or command line.
- Access the top-level theme development directory you created when you downloaded developer tools.
- Enter the following command:
gulp theme:deploy - To activate the new theme, enter the following command:
gulp reactivate
For more information, see Activating Themes and Extensions - In the top-level theme development directory, open the Modules folder:
Workspace/<THEME-DIRECTORY>/Modules/ - In the Modules folder, create the folders that your custom theme will use.
- In the new folder, create the files that your custom theme will override on the Base Theme.
- In the command line, enter the following command:
gulp theme:localYou can view the new theme locally and test the changes before deploying and activating the theme. - In the command line, enter the following command:
gulp theme:deploy - In NetSuite, go to Commerce > Extensions > Extension Manager and activate your custom theme.