Modify a theme

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

1. Open the gbc-project-dir/customization/customization-project-dir/config.json file.
2. 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", "common", "colors/dark"]
       },
       {
         "name": "default_mobile",
         "title": "Default",
         "uses": ["platform/mobile"]
       }
     ]
   }

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

3. Make your modifications.
   • If you have created a new theme part that you need to add to a theme, update the "uses" clause to include the new theme part. As discussed in the Add a theme topic, the order of the theme parts can matter. If you have the same variable or resource defined in multiple theme parts, the last theme part listed takes precedence when determining the value for that component.
   • If you need to modify a behavior caused by a theme part, modify the theme part rather than the theme. You may decide to change the theme part behavior, but remember the behavior will change for all themes that use that theme part.
   • You can delete theme parts from a theme. It is enough to simply not list the theme part in the "uses" clause; you do not need to remove the theme part directory itself.

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

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

4. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

5. 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.