Skip to main content

Custom Theme

Customers could decide to change witboost's colors and logo to be consistent with their own brand identity.

To override the style of the application, just create a custom_style directory in the packages/app/dist directory. Here you can insert three files where you can change the overall witboost appearance:

  • logo.svg - this is the image that will be used as witboost logo, in the upper-left corner;
  • icon-logo.svg - this is the small version image that will be used as witboost logo, in the upper-left corner, when the sidebar will be collapsed;
  • customPalette.json - this is the JSON file containing all the colors of the applications. You can override every available color, and the application will render differently based on it;
  • customOverride.json - this is an additional override file. Usually, this file should not be defined and used only in case you want to override the appearance of material UI components.

Using a ConfigMap to import theme files​

The above mentioned theme files can also be automatically imported into Witboost using a ConfigMap. The ConfigMap that contains the required theme files can be created in two ways:

  1. Use kubectl according to the following command: kubectl create configmap theme-configmap --from-file=logo.svg --from-file=customPalette.json --from-file=customOverride.json

  2. Add a Helm template file in the templates directory of the Witboost Helm Chart. This template should incorporate the logic to dynamically create a ConfigMap containing the required theme files.

In order to allow Witboost to use the theme files specified within the ConfigMap it will be necessary to enable customTheme functionality in Witboost's Helm Chart and also specify within the Helm's values.yaml, the name of the generated ConfigMap.

Logo

To override witboost's logo with a custom one you have to add, inside the custom_style directory, a file named logo (i.e. logo.png). The allowed extensions for the log are:

  • PNG
  • JPG/JPEG
  • GIF
  • WEBP
  • BMP

ConfigMap with Binary Theme Files​

Kubernetes ConfigMaps also support the inclusion of binary files. If you are using a ConfigMap to store theme files and you want to use a binary file for your logo such as PNG, you can encode the file in base64 using the b64enc and use the field binaryData instead of data to store it. As an alternative, you can use the kubectl create configmap ... --from-file=my_binary.png command as mentioned in the previous section.

NOTE: If you haven't already, ensure that blob URLs are included as an authorized origin within your Content Security Policy. This can be achieved by appending 'blob:' to the list of approved origins.

Colors

You can use the customPalette.json file to override theme colors with custom ones.

The available colors are:

{
  "blueDeep": "#20284d",
  "blueSky": "#00acc4",
  "lightBlue": "#6cdce0",
  "bkg": {
    "primary": "#e6f7f9",
    "secondary": "#edf0f2",
    "accent": "#f2edff",
    "accentSecondary": "#fdf1fb",
    "success": "#e6faee",
    "warning": "#fef6e9",
    "error": "#ffeeee"
  },
  "softened": {
    "primary": "#b0e5ed",
    "secondary": "#c8d1d8",
    "accent": "#d6c8ff",
    "accentSecondary": "#fad3f1",
    "success": "#b0eeca",
    "warning": "#fde4bb",
    "error": "#ffc9c9"
  },
  "primary": {
    "light": "#8ad9e4",
    "main": "#00acc4",
    "dark": "#005f6c",
    "contrastText": "#FFFFFF"
  },
  "secondary": {
    "light": "#aebac5",
    "main": "#4e6980",
    "dark": "#2b3a46",
    "contrastText": "#FFFFFF"
  },
  "white": "#FFFFFF",
  "black": "#000000",
  "grey": {
    "50": "#fafafa",
    "100": "#f5f5f5",
    "200": "#eeeeee",
    "300": "#e0e0e0",
    "400": "#bdbdbd",
    "500": "#9e9e9e",
    "600": "#757575",
    "700": "#616161",
    "800": "#424242",
    "900": "#212121"
  },
  "blueGrey": {
    "50": "#eceff1",
    "100": "#cfd8dc",
    "200": "#b0bec5",
    "300": "#90a4ae",
    "400": "#78909c",
    "500": "#607d8b",
    "600": "#546e7a",
    "700": "#455a64",
    "800": "#37474f",
    "900": "#263238"
  },
  "accent": {
    "light": "#c3adff",
    "main": "#7c4dff",
    "dark": "#442a8c"
  },
  "accentSecondary": {
    "light": "#f7beeb",
    "main": "#ee72d3",
    "dark": "#833f74"
  },
  "success": {
    "light": "#8ae6b0",
    "main": "#00c853",
    "dark": "#006e2e"
  },
  "warning": {
    "light": "#fcd79b",
    "main": "#f9a825",
    "dark": "#895c14"
  },
  "error": {
    "light": "#ffafaf",
    "main": "#ff5252",
    "dark": "#8c2d2d"
  },
  "favs": "#FFD600",
  "text": {
    "primary": "#4E6980",
    "secondary": "#4E6980"
  },
  "info": {
    "light": "#34548a",
    "main": "#34548a",
    "dark": "#263d65"
  },
  "background": {
    "default": "#FFFFFF",
    "paper": "#fafafa"
  },
  "banner": {
    "info": "#343b58",
    "error": "#F3ECED",
    "text": "#381A20",
    "link": "#381A20"
  },
  "marketplaceGraph": {
    "groupRange": {
      "light": "#cbe6eb",
      "dark": "#6ebcce"
    },
    "groupLabel": "#000000",
    "groupTooltip": {
      "main": "#54687f",
      "contrastText": "#FFFFFF"
    },
    "heatmapRange": {
      "light": "#a6d0e2",
      "dark": "#7274d0"
    },
    "systemMain": {
      "main": "#7274d0",
      "contrastText": "#FFFFFF"
    },
    "systemDisconnected": "#7274d04d",
    "systemInput": "#3b5488",
    "systemOutput": "#ee72d3",
    "systemLabel": "#FFFFFF",
    "systemTooltip": {
      "main": "#54687f",
      "contrastText": "#FFFFFF"
    },
    "navigationGroupSelected": "#00acc414"
  },
  "relationsGraph": {
    "error": "#F6675C",
    "warning": "#F9A825",
    "taxonomy": "#F9A825",
    "dataContract": "#00AEC5",
    "dataAtRest": "#4F6980",
    "dataProduct": "#4F6980",
    "resource": "#388AA1",
    "component": "#00AEC5",
    "domain": "#388AA1",
    "user": "#388AA1",
    "consumer": "#1BACAD",
    "push": "#4F6980",
    "consumption": "#12A5C7",
    "consumptionWarning": "#12A5C7",
    "dataProductBorder": "#34485A",
    "resourceBorder": "#34485A",
    "dataContractBorder": "#1090A1"
  },
  "charts": [
    "#7c4dff",
    "#8ad9e4",
    "#ee72d3",
    "#fde4bb",
    "#ff5252",
    "#833f74",
    "#00acc4",
    "#ffafaf",
    "#1430B8"
  ]
}
warning

Beware that changing colors can affect also contrasts between them, resulting in some labels and texts to be not very visible.

The marketplaceGraph object specifically determines the colors used by the Data Product Graph in the marketplace.

The relationsGraph object determines the colors used by:

  • the Dependencies graph in the Data Product Catalog
  • the Relations graph in the Software Catalog

The charts object defines a generic chart palette used troughout Witboost. The order in the array matters: if a chart has only one data element, only the first specified color will be used, if it has two, the first two will be used and so on.

You can add also a customOverride.json file, to override the Material UI components. Check the Material UI documentation to get component names, and how they can be overridden.