About this task

This procedure explains how to modify a theme in a customization project.

Prerequisites

• You must understand how customization works. See Customization fundamentals.
• The theme was previously defined in the file gbc-project-dir/customization/customization-project-dir/config.json.

Access the config.json file for the customization

Modifying a theme requires making changes to the config.json file located in the customization-project-dir directory. Open gbc-project-dir/customization/customization-project-dir/config.json with a text editor.

Locate the theme

Each theme is contained within curly braces within the "themes" element, and can be identified by its "name".

{
  "themes": [{
      "name": "default",
      "title": "Default",
      "uses": ["platform/desktop"]
    },
    {
      "name": "dark",
      "title": "Dark",
      "uses": ["platform/desktop", "mythemeparts/common", "mythemeparts/colors/dark"]
    },
    {
      "name": "default_mobile",
      "title": "Default",
      "uses": ["platform/mobile"]
    }
  ]
}

In this example, there are three themes defined: "default", "dark", and "default_mobile".

Once you have found the theme you need to modify, you can make your modifications. What you specifically do will depend on your needs:

• If you have created a new theme part that you need to add to your theme, you simply update the "uses" clause to include the new theme part. As discussed in the Add Theme topic, the order of the theme parts can matter, in the situation where you have the same component defined in multiple theme parts. Remember that the last theme part listed takes precedence when determining the value of a component defined more than once.
• If you need to modify the behavior that results due to a theme part, you will need to modify the theme part rather than the theme. You may decide to change the theme part behavior, but remember that if that theme part is used elsewhere, the behavior will change for all themes that use that theme part.
• You can delete theme parts from a theme. You do not need to remove the theme part directory itself. It is enough to simply not list the theme part in the "uses" clause.

For example, to modify the mobile theme to include the "mythemeparts/common" theme part, you would update the theme definition as follows:

    {
      "name": "default_mobile",
      "title": "Default",
      "uses": ["platform/mobile","mythemeparts/common"]
    }

Rebuild using gbc build.

When you have finished your modifications, save your changes and rebuild your customization:

$ gbc build --customization <customization_project_dir>

Test

Test the theme has been modified as expected by closing and reopening your application and looking for your modification.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.