Style Configuration

This documentation pertains to the unsupported version of NeoDash, as part of Neo4j Labs. For users of the supported NeoDash offering, refer to NeoDash commercial.

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 that should be overridden at the root level. Colors should be defined with an rgb comma separated string (e.g "243, 243, 240")

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 that should be overridden at the root level. Colors should be defined with an rgb comma separated string (e.g "243, 243, 240")