Customizing DataHub UI Styling and Look with CSS Changes

ingestion
1

Original Slack Thread

Hi,
How to change css styling, look and feel of datahub UI as per our team requirement. Do we have any style.css page to make the changes or any other way to modify datahub UI look

2

Hey there! :wave: Make sure your message includes the following information if relevant, so we can help more effectively!

  1. Are you using UI or CLI for ingestion?
  2. Which DataHub version are you using? (e.g. 0.12.0)
  3. What data source(s) are you integrating with DataHub? (e.g. BigQuery)

<@U06TM7M40RK> Can you help with the questions in this thread?

:information_source: We’re experimenting with a new AI assistant for questions in the <#CUMUWQU66> channel to help you track down helpful resources more quickly. Keep in mind that responses may not always be spot-on; feel free to ask it follow-up questions and don’t forget to provide its responses a :thumbsup: or :thumbsdown: so other folks in the Community know if you’re still looking for help on the topic!

3

To change the CSS styling and overall look and feel of the DataHub UI, you can follow these steps:

Summary

  1. Theming: Modify the theme configuration files.
  2. Environment Variables: Use environment variables to customize logos and favicons.
  3. Custom React Components: For more extensive changes, you may need to fork the DataHub React repository and modify the components directly.

Step-by-Step Guide

1. Theming
You can customize the theme by modifying the theme configuration files in the datahub-web-react module.

  • Locate Theme Files: Theme configurations are stored in ./src/conf/theme.
  • Edit Theme: Clone an existing theme file and modify it according to your requirements. The theme files have three sections: styles, assets, and content.

Example of a theme file (theme_light.config.json):

{
  "styles": {
    "primary-color": "#1890ff",
    "layout-header-background": "#001529",
    "layout-header-color": "#fff",
    "layout-body-background": "#f0f2f5",
    "component-background": "#fff",
    "body-background": "#fff",
    "border-color-base": "#d9d9d9",
    "text-color": "rgba(0, 0, 0, 0.85)",
    "text-color-secondary": "rgba(0, 0, 0, 0.45)",
    "heading-color": "rgba(0, 0, 0, 0.85)",
    "background-color-light": "#fafafa",
    "divider-color": "#f0f0f0",
    "disabled-color": "rgba(0, 0, 0, 0.25)",
    "steps-nav-arrow-color": "rgba(0, 0, 0, 0.25)",
    "homepage-background-upper-fade": "#ffffff",
    "homepage-background-lower-fade": "#f0f2f5",
    "box-shadow": "0 2px 8px rgba(0, 0, 0, 0.15)",
    "box-shadow-hover": "0 4px 12px rgba(0, 0, 0, 0.15)",
    "highlight-color": "#1890ff",
    "highlight-border-color": "#1890ff"
  },
  "assets": {
    "logoUrl": "/static/images/logo.png"
  },
  "content": {
    "title": "DataHub",
    "subtitle": "Metadata Platform",
    "homepage": {
      "homepageMessage": "Welcome to DataHub"
    },
    "search": {
      "searchbarMessage": "Search for datasets, charts, and more..."
    },
    "menu": {
      "items": [
        {
          "label": "Home",
          "path": "/",
          "shouldOpenInNewTab": false
        }
      ]
    }
  }
}
  • Update Environment Variable: Update the REACT_APP_THEME_CONFIG environment variable in the .env file to point to your new theme file.

2. Environment Variables
You can customize the logo and favicon without rebuilding the assets by setting environment variables.

  • Logo: Set the REACT_APP_LOGO_URL environment variable to the URL of your custom logo.
  • Favicon: Set the REACT_APP_FAVICON_URL environment variable to the URL of your custom favicon.

3. Custom React Components
For more extensive customizations, you may need to fork the DataHub React repository and modify the components directly.

  • Fork the Repository: Fork the datahub-web-react repository.
  • Modify Components: Make the necessary changes to the React components.
4
  • Build and Deploy: Build the modified React app and deploy it.

References

Sources: