Dark mode setting ignored when embedding BI dashboard inside Databricks App

chie_789
New Contributor III

When using the '@databricks/aibi-client' library to embed a BI dashboard inside a databricks app, the " colorScheme: 'dark' " setting is ignored when the app's 'prefer-color-scheme' is 'light' by default.
As a result, I am unable to set my dashboards to dark mode when they are embedded inside a databricks app.

const dashboard = new DatabricksDashboard({
  instanceUrl: ...,
  workspaceId: ...,
  dashboardId: ...,
  token: ...,
  container: containerElement,
  colorScheme: 'dark'
}

 

Summary:

  • Environment: Databricks Apps
  • Library: @DataBricks/aibi-client
  • Configuration: " colorScheme: 'dark' "
  • Result: Dashboard object contains colorScheme='dark' but iframe root renders: ' :root { color-scheme: light; }'
  • Local environment: dashboard correctly renders in dark mode when " colorScheme: 'dark' " is set
  • Databricks app environment: dashboard always renders incorrectly in light mode

 

DB-RKL
Databricks Employee
Databricks Employee

Hey @chie_789 

Have you tried setting the colour scheme using javascript? we have an example in the AIBI client docs?https://www.jsdelivr.com/package/npm/@databricks/aibi-client

chie_789
New Contributor III

Hi @DB-RKL 

Yes I have followed the example in the AIBI client docs.
I have verified that the colour scheme will render in dark mode just fine when running my app (Nuxt.js framework) in a local server, but when running it inside a Databricks App server the colour scheme will not render in dark mode.

chie_789
New Contributor III

A fix to this issue was included in the v1.2.1 release of the '@databricks/aibi-client' library.

View solution in original post