This section describes how to customize definitions of basic branding elements of Che-Theia.

Procedure

Create a product.json file with a new name of the product, logo, description, and list of hyperlinks on the Welcome page (an example of product.json:

{
    "name": "Red Hat CodeReady Workspaces",  (1)
    "icon": "codeready-workspaces-icon.png", (2)
    "logo": {                                (3)
        "dark": "codeready-workspaces-logo-light.png",
        "light": "codeready-workspaces-logo-dark.png"
    },
    "welcome": {                             (4)
        "title": "Welcome to Your Workspace",
        "links": ["website", "documentation"]
    },
    "links": {                               (5)
        "website": {
            "name": "Discover CodeReady Workspaces",
            "url": "https://developers.redhat.com/products/codeready-workspaces/overview"
        },
        "documentation": {
            "name": "Browse Documentation",
            "url": "https://www.redhat.com/docs"
        }
    }
}
1 name: tab title for the Welcome page and the About dialogue.
2 icon: icon for the Welcome page tab title.
3 logo: product logo for dark and light themes on the Welcome page (maximum height 80 px) and in the About dialogue (maximum height 100 px). Use an image with a transparent background. Define a relative path, an absolute path, or a URL to an image.
4 welcome: the behavior of the Welcome page. Customize the invitation title and the links in the Help section. When the welcome/links property is not defined, the Welcome page displays the links from the links section.
5 links: list of helpful resources for the product. Use tags to group links for better findability.

To use only one logo image for both dark and light themes:

{
    ...
    "logo": "product-logo.png"
    ...
}