Help with customizing dropdown colors in Dash

Dash Python
1

TL;DR Making dashboard, want to have dark palette like this, including dropdowns and menus having the same exact style and colors, halp.

Hello!

So I started building a dash app for a dashboard that eventually will be used by non technical people in my team. I wanted it to have a dark palette, so I went to https://bootswatch.com/darkly/ and applied the css to the app.

So far so good, except that my dropdown button and menu keep having a white background. Being a data scientist and not a web dev, I tried to fiddle around a little bit but to no avail.

Things I tried:

  • in dcc.Dropdown using className to assign it to every possible dropdown class in the CSS.
  • wrapping the Dropdown component with html.Div(), trying to replicate the same structure suggested on the aforementioned webpage
    example:
html.Div(className='nav nav-pills flex-column',
         children = [dcc.Dropdown(className='nav-item dropdown',
                                  options = [..]
                                  )
                    ]
)
  • Actually using the style attribute to manually change the background color of the button, which somewhat worked, but still doesn’t reflect the style of the CSS, as well as having the menu options still with white background.

Any help or feedback is much appreciated.