blob: 9c910cfab0455c6b1c9fdd94bc8a4303ecfe48a8 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Branding Che-Theia :: Eclipse Che Documentation</title>
<link rel="canonical" href="https://www.eclipse.org/che/docs/che-7/contributor-guide/branding-che-theia/">
<meta name="keywords" content="contributor-guide, branding-che-theia">
<meta name="generator" content="Antora 2.3.4">
<link rel="stylesheet" href="../../../_/css/site.css">
<link rel="stylesheet" href="../../../_/css/extra.css">
<link rel="stylesheet" href="../../../_/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" href="../../../favicon.ico" type="image/x-icon">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37306001-2"></script>
<script>function gtag(){dataLayer.push(arguments)};window.dataLayer=window.dataLayer||[];gtag('js',new Date());gtag('config','UA-37306001-2')</script>
<script>var uiRootPath = '../../../_'</script>
</head>
<body class="article">
<header class="header" role="banner">
<nav class="navbar">
<div class="navbar-brand">
<div class="navbar-item">
<button class="navbar-burger" data-target="topbar-nav">
<span></span>
<span></span>
<span></span>
</button>
<img src="../../../_/img/icon-eclipse-che.svg" class="navbar-logo" alt="Eclipse Che logo">
<a href="https://www.eclipse.org/che/docs">Eclipse Che Documentation</a>
</div>
</div>
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item hide-for-print">
<script async src="https://cse.google.com/cse.js?cx=002898025167115630151:gnr5edrg2eo"></script>
<div class="gcse-searchbox" enableAutoComplete="true"></div>
</div>
<a class="navbar-item" href="https://www.eclipse.org/che/docs">Home</a>
<a class="navbar-item" href="https://che.eclipse.org/">Blog</a>
<a class="navbar-item" href="https://github.com/eclipse/che">Source Code</a>
</div>
</div>
</nav>
<div class="gcse-searchresults"></div>
</header><div class="body">
<div class="nav-container" data-component="che-7" data-version="master">
<aside class="nav">
<div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
<nav class="nav-menu">
<h3 class="title"><a href="../../overview/introduction-to-eclipse-che/">Documentation</a></h3>
<ul class="nav-list">
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../overview/introduction-to-eclipse-che/">Introduction to Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../overview/che-architecture/">Che architecture</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../hosted-che/hosted-che/">Eclipse Che hosted by Red Hat</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">End-user Guide</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/navigating-che/">Navigating Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/navigating-che-using-the-dashboard/">Navigating Che: dashboard</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/importing-certificates-to-browsers/">Importing certificates to browsers</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/accessing-che-from-openshift-developer-perspective/">Navigating Che from OpenShift Developer Perspective</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/che-theia-ide-basics/">Che-Theia IDE basics</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/defining-custom-commands-for-che-theia/">Defining custom commands for Che-Theia</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/version-control/">Version Control</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/che-theia-troubleshooting/">Che-Theia Troubleshooting</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/differences-in-how-che-theia-webview-works-on-a-single-host-mode-comparing-to-a-multi-host-mode/">Differences in how Che-Theia Webview works on a single-host mode comparing to a multi-host mode</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/workspaces-overview/">Using developer workspaces</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/creating-a-workspace-from-code-sample/">Creating a workspace from code sample</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/creating-a-workspace-from-remote-devfile/">Creating a workspace from a remote devfile using the dashboard</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/creating-a-workspace-from-local-devfile-using-chectl/">Creating a workspace from local devfile using chectl</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/creating-a-workspace-by-importing-the-source-code-of-a-project/">Creating a workspace by importing the source code of a project</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/configuring-a-workspace-with-dashboard/">Configuring a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/running-a-workspace-with-dashboard/">Running a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/importing-kubernetes-applications-into-a-workspace/">Importing Kubernetes applications into a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/remotely-accessing-workspaces/">Remotely accessing workspaces</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/mounting-a-secret-as-a-file-or-an-environment-variable-into-a-workspace-container/">Mounting a secret as a file or an environment variable into a workspace container</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/authenticating-on-scm-server-with-a-personal-access-token/">Authenticating on SCM Server with a personal access token</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/authoring-devfiles/">Authoring devfiles</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/authoring-devfiles-version-1/">Authoring devfiles version 1</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/authoring-devfiles-version-2/">Authoring devfiles version 2</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/customizing-developer-environments/">Customizing developer environments</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/what-is-a-che-theia-plug-in/">What is a Che-Theia plug-in</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/adding-a-vs-code-extension-to-a-workspace/">Adding a VS Code extension to a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/adding-a-vs-code-extension-to-the-che-plugin-registry/">Adding a VS Code extension to the Che plug-ins registry</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/publishing-metadata-for-a-vs-code-extension/">Publishing a VS Code extension</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/testing-a-visual-studio-code-extension-in-che/">Testing a VS Code extension in Che</a>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/using-alternative-ides-in-che/">Using alternative IDEs in Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/support-for-jetbrains-ides/">JetBrains IDEs</a>
<ul class="nav-list">
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../../end-user-guide/using-jetbrains-intellij-idea-community-edition/">Using IntelliJ Idea Community Edition</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../../end-user-guide/using-jetbrains-intellij-idea-ultimate-edition/">Using IntelliJ Idea Ultimate Edition</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../../end-user-guide/configuring-an-existing-workspace-to-use-intellij-idea/">Configuring an existing workspace to use IntelliJ IDEA</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../../end-user-guide/using-jetbrains-webstorm/">Using WebStorm</a>
</li>
<li class="nav-item" data-depth="4">
<a class="nav-link" href="../../end-user-guide/provisioning-jetbrains-activation-code-for-offline-use/">Provisioning activation code for offline use</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../end-user-guide/support-for-theia-based-ides/">Theia-based IDEs</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/adding-tools-to-che-after-creating-a-workspace/">Adding tools to Che after creating a workspace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-private-container-registries/">Using private container registries</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/using-artifact-repositories-in-a-restricted-environment/">Using artifact repositories in a restricted environment</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-maven-artifact-repositories/">Using Maven artifact repositories</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-gradle-artifact-repositories/">Using Gradle artifact repositories</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-python-artifact-repositories/">Using Python artifact repositories</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-go-artifact-repositories/">Using Go artifact repositories</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-nuget-artifact-repositories/">Using NuGet artifact repositories</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/using-npm-artifact-repositories/">Using npm artifact repositories</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../end-user-guide/troubleshooting-che/">Troubleshooting Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/viewing-che-workspaces-logs/">Viewing Che workspaces logs</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/investigating-failures-at-a-workspace-start-using-the-verbose-mode/">Troubleshooting workspace start failures</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/troubleshooting-slow-workspaces/">Troubleshooting slow workspaces</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../end-user-guide/troubleshooting-network-problems/">Troubleshooting network problems</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">Installation Guide</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../installation-guide/supported-platforms/">Supported platforms</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../installation-guide/configuring-the-che-installation/">Configuring the Che installation</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/installing-che/">Installing Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/installing-che-in-cloud/">Installing Che in cloud</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-openshift-4-using-operatorhub/">Installing Che on OpenShift 4 using OperatorHub</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-openshift-4-using-cli/">Installing Che on OpenShift 4 using CLI</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-openshift-3-using-the-operator/">Installing Che on OpenShift 3</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-kubespray/">Installing Che on Kubespray</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-aws/">Installing Che on AWS</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-google-cloud-platform/">Installing Che on Google Cloud</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-microsoft-azure/">Installing Che on Microsoft Azure</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/installing-che-locally/">Installing Che locally</a>
<ul class="nav-list">
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-codeready-containers/">Installing Che on CodeReady Containers</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-docker-desktop/">Installing Che on Docker Desktop</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-minikube/">Installing Che on Minikube</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-minishift/">Installing Che on Minishift</a>
</li>
<li class="nav-item" data-depth="3">
<a class="nav-link" href="../../installation-guide/installing-che-on-kind/">Installing Che on Kind</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/using-the-chectl-management-tool/">Using the chectl management tool</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/installing-che-in-a-restricted-environment/">Installing Che in restricted environment</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/advanced-configuration/">Advanced configuration</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/advanced-configuration-options-for-the-che-server-component/">Advanced configuration options for Che server</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-namespace-strategies/">Configuring workspace target namespace</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-storage-strategies/">Configuring storage strategies</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-storage-types/">Configuring storage types</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-the-number-of-workspaces-that-a-user-can-run/">Configuring the number of workspaces that a user can run</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-the-number-of-workspaces-that-a-user-can-create/">Configuring the number of workspaces that a user can create</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-workspace-exposure-strategies/">Configuring workspace exposure strategies</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-workspaces-nodeselector/">Configuring workspaces nodeSelector</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-che-hostname/">Configuring Che hostname</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-ingresses/">Configuring Kubernetes Ingress</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/configuring-routes/">Configuring OpenShift Route</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/deploying-che-with-support-for-git-repositories-with-self-signed-certificates/">Deploying Che with support for Git repositories with self-signed certificates</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/installing-che-using-storage-classes/">Installing Che using storage classes</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/importing-untrusted-tls-certificates/">Importing untrusted TLS certificates to Che</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/switching-between-external-and-internal-communication/">Switching between external and internal ways in inter-component communication</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/setting-up-the-keycloak-che-username-readonly-theme-for-the-eclipse-che-login-page/">Setting up the Keycloak che-username-readonly theme for the Eclipse Che login page</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/mounting-a-secret-as-a-file-or-an-environment-variable-into-a-container/">Mounting a Secret or a ConfigMap as a file or an environment variable into a Eclipse&#160;Che container</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/enabling-dev-workspace-engine/">Enabling Dev Workspace engine</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/upgrading-che/">Upgrading Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/upgrading-che-using-operatorhub/">Upgrading Che using OperatorHub</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/upgrading-che-using-the-cli-management-tool/">Upgrading Che using the CLI management tool</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/upgrading-che-using-the-cli-management-tool-in-restricted-environment/">Upgrading Che in restricted environment</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/upgrading-che-namespace-strategies-other-than-per-user/">Updating Che namespace strategies other than 'per user'</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../installation-guide/uninstalling-che/">Uninstalling Che</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/uninstalling-che-after-operatorhub-installation-using-openshift-web-console/">Using the OpenShift web console</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/uninstalling-che-after-operatorhub-installation-using-openshift-cli/">Using OpenShift CLI</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../installation-guide/uninstalling-che-after-chectl-installation/">Using chectl</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">Administration Guide</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/che-architecture-overview/">Che architecture</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/che-workspace-controller/">Che workspace controller</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/che-workspaces-architecture/">Che workspaces architecture</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../administration-guide/calculating-che-resource-requirements/">Calculating Che resource requirements</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/customizing-the-registries/">Customizing the registries</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/building-custom-registry-images/">Building custom registry images</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/running-custom-registries/">Running custom registries</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/retrieving-che-logs/">Retrieving Che logs</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/configuring-server-logging/">Configuring server logging</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/viewing-kubernetes-events/">Accessing Kubernetes events on OpenShift</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/viewing-operator-events/">Viewing the Operator events on OpenShift</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/viewing-che-server-logs/">Viewing Che server logs</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/viewing-external-service-logs/">Viewing external service logs</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/viewing-plug-in-broker-logs/">Viewing Plug-in broker logs</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/collecting-logs-using-chectl/">Collecting logs using chectl</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../administration-guide/monitoring-che/">Monitoring Che</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../administration-guide/tracing-che/">Tracing Che</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/backup-and-disaster-recovery/">Backup and disaster recovery</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/external-database-setup/">External database setup</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/persistent-volumes-backups/">Persistent Volumes backups</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/caching-images-for-faster-workspace-start/">Caching images for faster workspace start</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/defining-the-list-of-images-to-pull/">Defining the list of images</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/defining-the-memory-parameters-for-the-image-puller/">Defining the memory settings</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/installing-image-puller-using-che-operator/">Installing using the Che Operator</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/installing-image-puller-on-kubernetes-using-the-image-puller-operator/">Installing using the Kubernetes Image Puller Operator</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/installing-image-puller-on-openshift-using-operatorhub/">Installing on OpenShift 4</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/installing-image-puller-on-openshift-using-openshift-templates/">Installing on OpenShift 3</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/installing-image-puller-on-kubernetes-using-helm/">Installing using Helm</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../administration-guide/managing-identities-and-authorizations/">Managing identities and authorizations</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/authenticating-users/">Authenticating users</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/authorizing-users/">Authorizing users</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/configuring-authorization/">Configuring authorization</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/configuring-openshift-oauth/">Configuring OpenShift OAuth</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../administration-guide/removing-user-data/">Removing user data</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">Contributor Guide</span>
<ul class="nav-list">
<li class="nav-item is-current-page" data-depth="1">
<a class="nav-link" href="./">Branding Che-Theia</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../developing-che-theia-plug-ins/">Developing Che-Theia plug-ins</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../testing-che-theia-plug-ins/">Testing Che-Theia plug-ins</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../publishing-che-theia-plug-ins/">Publishing Che-Theia plug-ins</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../adding-support-for-a-new-language/">Adding support for a new language</a>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../adding-support-for-a-new-debugger/">Adding support for a new debugger</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../che-extensibility-reference/">Che extensibility reference</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../che-extension-points/">Che extension points</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../che-theia-plug-in-api/">Che-Theia plug-in API</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../debug-adapter-protocol/">Debug Adapter Protocol</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../language-server-protocol/">Language Server Protocol</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<button class="nav-item-toggle"></button>
<span class="nav-text">Extensions</span>
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../extensions/eclipse-che4z/">eclipse-che4z.adoc</a>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../extensions/openshift-connector-overview/">OpenShift Connector</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/features-of-openshift-connector/">Features of OpenShift Connector</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/installing-openshift-connector-in-che/">Installing OpenShift Connector in Eclipse Che</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/authenticating-with-openshift-connector-from-che/">Authenticating with OpenShift Connector from Eclipse Che</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/creating-components-with-openshift-connector-in-che/">Creating Components with OpenShift Connector in Eclipse Che</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/connecting-source-code-from-github-to-a-openshift-component-using-openshift-connector/">Connecting source code from GitHub to a OpenShift Component</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<button class="nav-item-toggle"></button>
<a class="nav-link" href="../../extensions/telemetry/">Telemetry</a>
<ul class="nav-list">
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/creating-a-telemetry-plugin/">Creating A Telemetry Plugin</a>
</li>
<li class="nav-item" data-depth="2">
<a class="nav-link" href="../../extensions/the-woopra-telemetry-plugin/">The Woopra Telemetry Plugin</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../extensions/java-lombok/">Java Lombok</a>
</li>
</ul>
</li>
<li class="nav-item" data-depth="0">
<ul class="nav-list">
<li class="nav-item" data-depth="1">
<a class="nav-link" href="../../glossary/che-glossary/">Che glossary</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
<div class="context">
<span class="title">Documentation</span>
<span class="version">master</span>
</div>
<ul class="components">
<li class="component is-current">
<a class="title" href="../../overview/introduction-to-eclipse-che/">Documentation</a>
<ul class="versions">
<li class="version is-current is-latest">
<a href="../../overview/introduction-to-eclipse-che/">master</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<a href="../../overview/introduction-to-eclipse-che/" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
<ul>
<li><a href="../../overview/introduction-to-eclipse-che/">Documentation</a></li>
<li>Contributor Guide</li>
<li><a href="./">Branding Che-Theia</a></li>
</ul>
</nav>
<div class="edit-this-page"><a href="https://github.com/eclipse/che-docs/edit/master/modules/contributor-guide/pages/branding-che-theia.adoc">Edit this Page</a></div>
</div>
<div class="content">
<aside class="toc sidebar" data-title="Contents" data-levels="2">
<div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">Branding Che-Theia</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This chapter describes how to customize the Che-Theia interface and branding. Customization is possible for the following elements:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Welcome</strong> page and <strong>About</strong> dialog:</p>
<div class="ulist">
<ul>
<li>
<p>Product name</p>
</li>
<li>
<p>Product logo</p>
</li>
<li>
<p>Description</p>
</li>
<li>
<p>List of helpful resources (<strong>Help</strong> section of the <strong>Welcome</strong> page)</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="paragraph">
<p>To start using the customized Che-Theia:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Build a container image with the customized Che-Theia.</p>
</li>
<li>
<p>Define an editor <code>meta.yaml</code> that uses the custom image.</p>
</li>
<li>
<p>Create a workspace from a devfile using the custom editor.</p>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="defining-custom-branding-values-for-che-theia_che"><a class="anchor" href="#defining-custom-branding-values-for-che-theia_che"></a>Defining custom branding values for Che-Theia</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to customize definitions of basic branding elements of Che-Theia.</p>
</div>
<div class="paragraph">
<div class="title">Procedure</div>
<p>Create a <code>product.json</code> file with a new name of the product, logo, description, and list of hyperlinks on the <strong>Welcome</strong> page (an example of <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/branding/product.json"><code>product.json</code></a>:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
"name": "Red Hat CodeReady Workspaces", <i class="conum" data-value="1"></i><b>(1)</b>
"icon": "codeready-workspaces-icon.png", <i class="conum" data-value="2"></i><b>(2)</b>
"logo": { <i class="conum" data-value="3"></i><b>(3)</b>
"dark": "codeready-workspaces-logo-light.png",
"light": "codeready-workspaces-logo-dark.png"
},
"welcome": { <i class="conum" data-value="4"></i><b>(4)</b>
"title": "Welcome to Your Workspace",
"links": ["website", "documentation"]
},
"links": { <i class="conum" data-value="5"></i><b>(5)</b>
"website": {
"name": "Discover CodeReady Workspaces",
"url": "https://developers.redhat.com/products/codeready-workspaces/overview"
},
"documentation": {
"name": "Browse Documentation",
"url": "https://www.redhat.com/docs"
}
}
}</code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><code>name</code>: tab title for the <strong>Welcome</strong> page and the <strong>About</strong> dialog.</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><code>icon</code>: icon for the <strong>Welcome</strong> page tab title.</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><code>logo</code>: product logo for dark and light themes on the <strong>Welcome</strong> page (maximum height 80 pixels) and in the <strong>About</strong> dialog (maximum height 100 pixels). Use an image with a transparent background. Define a relative path, an absolute path, or a URL to an image.</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><code>welcome</code>: the behavior of the <strong>Welcome</strong> page. Customize the invitation title and the links in the <strong>Help</strong> section. When the <code>welcome/links</code> property is not defined, the <strong>Welcome</strong> page displays the links from the <code>links</code> section.</td>
</tr>
<tr>
<td><i class="conum" data-value="5"></i><b>5</b></td>
<td><code>links</code>: list of helpful resources for the product. Use tags to group links to make them easier to find.</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>To use only one logo image for both dark and light themes:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{
...
"logo": "product-logo.png"
...
}</code></pre>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="building-a-che-theia-container-image-with-custom-branding_che"><a class="anchor" href="#building-a-che-theia-container-image-with-custom-branding_che"></a>Building a Che-Theia container image with custom branding</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to build a Che-Theia container image with custom branding applied.</p>
</div>
<div class="ulist">
<div class="title">Prerequisites</div>
<ul>
<li>
<p>A <code>product.json</code> file with custom branding definitions.</p>
</li>
</ul>
</div>
<div class="olist arabic">
<div class="title">Procedure</div>
<ol class="arabic">
<li>
<p>Download an example <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/Dockerfile"><code>Dockerfile</code></a>.</p>
</li>
<li>
<p>In the <code>Dockerfile</code> directory, create a <code>branding/</code> sub-directory. Place the custom <code>product.json</code> file and logo images into the <code>branding/</code> directory.</p>
</li>
<li>
<p>Build the container image with Che-Theia and push the image to a container registry:</p>
<div class="listingblock">
<div class="content">
<pre>$ docker build -t username/che-theia-codeready-workspaces:next .
$ docker push username/che-theia-codeready-workspaces:next</pre>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="testing-che-theia-with-custom-branding_che"><a class="anchor" href="#testing-che-theia-with-custom-branding_che"></a>Testing Che-Theia with custom branding</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This section describes how to test a customized Che-Theia by opening a new workspace with custom branding.</p>
</div>
<div class="ulist">
<div class="title">Prerequisites</div>
<ul>
<li>
<p>Che-Theia container image built with custom branding definitions.</p>
</li>
</ul>
</div>
<div class="paragraph">
<div class="title">Procedure</div>
<p>To test a custom Che-Theia image, create a new <code>meta.yaml</code> file describing a custom <code>cheEditor</code>, and use it in a devfile for the testing workspace.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Clone the che-plugin-registry repository and check out the version to deploy. See,</p>
<div class="listingblock">
<div class="content">
<pre>$ git clone git@github.com:eclipse/che-plugin-registry.git
$ cd che-plugin-registry
$ git checkout 7.33.x</pre>
</div>
</div>
</li>
<li>
<p>Open the <code>che-editors.yaml</code> file.</p>
</li>
<li>
<p>Edit the entry where <code>id</code> equals <code>eclipse/che-theia/next</code> and replace the <code>image</code> value in the <code>containers</code> section to point to the custom Che-Theia container image.</p>
</li>
<li>
<p>Build the registry:</p>
<div class="listingblock">
<div class="content">
<pre>$ ./build.sh --organization <em>&lt;my-org&gt;</em> \
--registry <em>&lt;my-registry&gt;</em> \
--tag <em>&lt;my-tag&gt;</em></pre>
</div>
</div>
</li>
<li>
<p>Navigate to the <code>./che-plugin-registry/v3/plugins/eclipse/che-theia/next</code> directory.</p>
</li>
<li>
<p>Publish the <code>meta.yaml</code> file in this directory to a publicly accessible location where it can be used as an HTTP resource.</p>
</li>
<li>
<p>Create a workspace using the sample <a href="https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/devfile.yaml">che-theia-branding-example devfile</a> to apply the changes.</p>
<div class="paragraph">
<p>Make sure the <code>reference</code> field points to your published <code>meta.yaml</code> file:</p>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="https://workspaces.openshift.com/f?url=https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/devfile.yaml"><img src="https://www.eclipse.org/che/contribute.svg" alt="contribute"></a>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">metadata:
name: che-theia-all
projects:
- name: che-cheia-branding-example
source:
location: 'https://github.com/che-samples/che-theia-branding-example.git'
type: git
branch: master
components:
- type: cheEditor
reference: &gt;-
https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/che-editor.meta.yaml
apiVersion: 1.0.0</code></pre>
</div>
</div>
</li>
<li>
<p>Run the workspace to see the changes:</p>
<div class="ulist">
<ul>
<li>
<p>The dark theme of Che-Theia:</p>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/welcome-dark.png"><img src="../_images/branding/welcome-dark.png" alt="welcome dark"></a>
</div>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/about-dark.png"><img src="../_images/branding/about-dark.png" alt="about dark"></a>
</div>
</div>
</li>
<li>
<p>The light theme of Che-Theia:</p>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/welcome-light.png"><img src="../_images/branding/welcome-light.png" alt="welcome light"></a>
</div>
</div>
<div class="imageblock">
<div class="content">
<a class="image" href="../_images/branding/about-light.png"><img src="../_images/branding/about-light.png" alt="about light"></a>
</div>
</div>
</li>
</ul>
</div>
</li>
</ol>
</div>
</div>
</div>
</article>
</div>
</main>
</div>
<footer class="footer">
<div><a href="https://www.eclipse.org" target="_blank">Eclipse Foundation</a> |
<a href="https://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a> |
<a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a> |
<a href="https://www.eclipse.org/legal/epl-2.0/" target="_blank">Eclipse Public License</a> |
<a href="https://www.eclipse.org/legal" target="_blank">Legal Resources</a></div>
</footer>
<script src="../../../_/js/site.js"></script>
<script async src="../../../_/js/vendor/highlight.js"></script>
</body>
</html>