How to Change the Theme in DataHub UI and Locate the datahub-web-react Module

ui
1

Original Slack Thread

<@U06TM7M40RK> How do we change the theme in datahub ui

2

To change the theme in the DataHub UI, you need to modify the theme configuration in the datahub-web-react module. Here are the steps to achieve this:

  1. Locate Theme Files: The theme configuration files are stored in the datahub-web-react module, specifically in the ./src/conf/theme directory. You can find the default theme files such as theme_light.config.json and theme_dark.config.json there.

  2. Set Environment Variable: You need to set the REACT_APP_THEME_CONFIG environment variable to point to the desired theme configuration file. For example, to set the dark theme, you would set REACT_APP_THEME_CONFIG=theme_dark.config.json.

  3. Restart the Container: After setting the environment variable, restart the frontend container to apply the changes.

Here is a step-by-step guide:

  1. Edit the .env File:

    • Open the .env file in the datahub-web-react directory.
    • Set the REACT_APP_THEME_CONFIG variable to the desired theme file. For example, for the dark theme:
      REACT_APP_THEME_CONFIG=theme_dark.config.json

  2. Restart the Frontend Container:

    • Restart the frontend container to apply the changes. This can typically be done using Docker commands or your container orchestration tool.

For more detailed information, you can refer to the <datahub-web-react | DataHub Theming Guide> and the <https://github.com/datahub-project/datahub/tree/master/datahub-web-react/src/conf/theme|theme files on GitHub>.

Would you like more detailed instructions or a specific example?

Sources:

  • <Slack Discussion on Theming> :+1: 0 button :-1: 0 button :light_bulb: Hint: Mention @runllm in the thread for followups.
3

<@U06TM7M40RK> where is datahub-web-react module

4

The datahub-web-react module is part of the DataHub project and contains the React application that serves as the DataHub UI. You can find it within the DataHub GitHub repository. Here’s how you can locate and work with it:

  1. Clone the DataHub Repository: First, ensure you have cloned the DataHub repository from GitHub to your local machine. You can do this using the following command:

    git clone https://github.com/datahub-project/datahub.git

  2. Navigate to the Module: Once you have the repository cloned, navigate to the datahub-web-react directory:

    cd datahub/datahub-web-react

  3. Structure and Files: Inside the datahub-web-react directory, you will find the source code for the React application, including configuration files, components, and theme files.

  4. Running the Application: You can run the React application locally by installing the necessary dependencies and starting the development server:

    yarn install
yarn start

    This will start the application on http://localhost:3000.

For more detailed information about the datahub-web-react module, you can refer to the <https://datahubproject.io/docs/0.13.1/datahub-web-react|DataHub Web React documentation> and the <https://github.com/datahub-project/datahub/blob/master/datahub-web-react/README.md|GitHub README>.

Would you like more detailed steps on setting up or customizing the module?

Sources: