Customize corporate style

To customize the colors of the GBC to align with your corporate branding, you can modify theme variables.

In this task you apply some customization to the user interface by modifying styles in the theme.scss.json file. For more information about this file, go to theme.scss.json file.

To apply corporate colors to the UI interface using theme variables, start by customizing the main UI variables that dictate the overall appearance. Focus on the following variables:

Table 1. UI variables
Variable	Description
`$ui-primary-color`	The primary brand color used throughout the interface.
`$ui-on-primary-color`	Color for text or icons that appear on top of the primary color.
`$ui-background-color`	The main background color of the UI.
`$ui-field-color`	Color for input fields and form elements.
`$ui-border-color`	Color for borders around UI elements.
`$ui-text-icon-color`	General color for text and icons across the interface.
`$ui-error-color`	Color used for displaying error messages.
`$ui-font-family`	Font family for standard text throughout the UI.
`$ui-font-family-monospace`	Font family for monospaced text, typically used in code displays.
`$ui-density`	Variable for UI density (will be implemented shortly).

Steps to customize the UI's theme style

Open your project_dir/customization/sample/theme.scss.json file in a text editor.
Change the primary color palette from blue to your corporate colors or a color of your choosing.
Refer to the table, Table 1, for variables you can customize to achieve your corporate look, such as the $ui-primary-color for primary elements, $ui-background-color for backgrounds, and $ui-field-color for input fields.
For more information on how to define colors, refer to Defining colors
Save your changes and rebuild your customization using gbc build:
```
$ gbc build --customization sample
```
Test your customization by viewing the demo application in your browser:
1. Run the GAS by executing the following command:
  (Line breaks have been added to improve readability.)
```
$ httpdispatch 
   -E res.path.gbc.user="project_dir/customization/customization_project/dist/customization"
```
  This sets the path to your GBC customization directory and overrides the default GBC_LOOKUP_PATH in the GAS.
2. In the browser, specify the customization in the application URL by setting the gbc query string parameter.
  
  http://localhost:6394/ua/r/demo?gbc=sample
  
  This opens the demo application with your GBC customization.
  
  Tip:
  You may need to use CTRL + F5 to clear the browser cache before you see your changes.
You should see the effect of the changes applied to these elements of the UI:
- application header and footer
- chromebar
- sidebar panel
- buttons
- highlighted table rows

What to do next

Refer to the other topics in this section on customization that provide procedures such as adding your company's logo and/or changing the favicon, and so on.