Style configuration

When using a custom NeoDash deployment, there are several theme variables that can be configured. These mostly relate to CSS tokens for Needle and some other brand specific options.

For a simple (non-Dockerized) deployment, these configuration parameters can be changed by modifying dist/style.config.json after you have built the application. When using the NeoDash Docker image, these can be passed as environment variables. For example:

docker run -p 5005:5005 \
 -e DASHBOARD_HEADER_BRAND_LOGO=https://picsum.photos/500/100 \
 neo4jlabs/neodash

An example configuration for NeoDash:

{
  "DASHBOARD_HEADER_BRAND_LOGO": "logo_lightsand.png",
  "DASHBOARD_HEADER_COLOR" : "#F3F3F0",
  "DASHBOARD_HEADER_BUTTON_COLOR" : "#009999",
  "DASHBOARD_HEADER_TITLE_COLOR" : "#00C1B6",
  "DASHBOARD_PAGE_LIST_COLOR" : "#F3F3F0",
  "DASHBOARD_PAGE_LIST_ACTIVE_COLOR": "#009999",
  "style": {
    "--palette-light-neutral-bg-weak" : "243, 243, 240"
  }
}

Configuration options

Name Type Default value Description

DASHBOARD_HEADER_BRAND_LOGO

String

undefined

This variable defines the name of the logo file located on the public folder of the NeoDash deployment, if you want your own logo instead of the Neo4j one.

DASHBOARD_HEADER_COLOR

String

#0B297D

Determines the color of the header.

DASHBOARD_HEADER_BUTTON_COLOR

String

#FFFFFF22

Determines the color of the header buttons.

DASHBOARD_HEADER_TITLE_COLOR

String

#FFFFFF

Determines the color of the header title.

DASHBOARD_PAGE_LIST_COLOR

String

#F0F0F0

Determines the color of the page selector tabs.

DASHBOARD_PAGE_LIST_ACTIVE_COLOR

String

#FFFFFF

Determines the color of the page selector active tabs.

style

Object

{}

Determines CSS needle tokens to be overridden at the root level. Define colors should with an RGB comma-separated string (e.g "243, 243, 240").