Valid from Datafari 6.2 (UIv2 1.1.2)

It is currently not possible to customize colors and themes without rebuilding Datafari UIv2. Still, here are the main elements to modify (before rebuilding the UI) in order to customize colors and themes:

Edit the file src/styles/variables.css
- To change the color of the tabs titles, documents titles, the facet titles and the connection button change the property $success-color

$success-color: #3333ff;

Here we chose blue color :

To change the color of the button connection at mouseover, edit the property $success-dark-color :

$success-dark-color: #ff0000;

Here we chose red color :

Valid from Datafari 5.1 (UI 1.0.0-beta-0.6.0) up to Dafari 6.2 (UI 1.0)

This functionality is available from commit a99c24fc77cfb7b76ef3c52e53a4ef701a0f4545, but is temporarily disabled in version 6.2.

It is possible to customize the facets displayed as well as some of the elements displayed in DatafariUI by modifying a configuration file. This configuration file is theme.json and is present in the public folder of the DatafariUI project.

When installed bundled with Datafari, the location of this file is:

/opt/datafari/www/theme.json

The default file looks like so:

{
  "palette": {
    "type": "light",
    "primary": {
      "main": "#ffffff",
      "dark": "#fafafa",
      "contrastText": "#000000"
    },
    "secondary": {
      "light": "#99cc33",
      "main": "#679439",
      "dark": "#648542"
    },
    "background": {
      "default": "#ffffff",
      "paper": "#fafafa"
    }
  },
  "typography": {
    "fontFamily": "Montserrat, Helvetica, Arial, sans-serif"
  }
}

The colored screenshot below will help me explain which part of the UI are affected by each configuration :

primary: parts in blue in the screenshot
secondary: part (and text) in green in the screenshot
background:
- default: parts in dark pink
- paper: parts in light pink

For primary and secondary:

light, main and dark: three variations of the color. Can be used to provide variations in some situation. Only the main color is used in the current DatafariUI interface (as of November 25th 2021)
contrastText: The color used for the text displayed on elements using this color scheme (primary or secondary)

More theme customization

DatafariUI uses MaterialUI and its theme capabilities (https://mui.com/customization/default-theme/#main-content ). The theme configuration file can redefine the theme entirely as you wish so you can change any little detail as long as you read the doc and understand how to access it.

You can also use https://bareynol.github.io/mui-theme-creator/ to help you in your theme creation.

Customizing DatafariUI - Customizing colors and theme

More theme customization