Dash Draggable Styling in Dark Mode


I am building a resizable/movable widget using dash-draggable library. I have aDash AG Grid inside the widget. Below is an image of the same.

When I switch on Dark Themes (DARKLY from dbc), the bar on the top still remains white. This bar is used to drag the window . Can anyone help me with styling the draggable bar to match the darkly theme?


Hello @smalgotrader,

I would recommend adding the class to it that you want to emulate from dbc.

I tried customizing the style element of dash-draggable, by changing background color to red, but it changed the background of entire window to red. The content style was retained as it is.

Here is the working minimal code:

import dash
from dash import html
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
import dash_draggable as ddg

app = dash.Dash(
    , external_stylesheets=[dbc.themes.DARKLY]

id_index = "test"

grid = dag.AgGrid(
    id={"type": "data_grid", "index": id_index}
    , className="ag-theme-balham-dark"
    , columnDefs=[
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
        {'headerName': 'Country', 'field': 'country'},
        {'headerName': 'Occupation', 'field': 'occupation'}
    , rowData=[
        {'name': 'John', 'age': 25, 'country': 'USA', 'occupation': 'Engineer'},
        {'name': 'Sarah', 'age': 32, 'country': 'Canada', 'occupation': 'Teacher'},
        {'name': 'David', 'age': 41, 'country': 'UK', 'occupation': 'Doctor'},
        {'name': 'Emma', 'age': 29, 'country': 'Australia', 'occupation': 'Designer'},
        {'name': 'Michael', 'age': 36, 'country': 'Germany', 'occupation': 'Manager'}
    , columnSize="sizeToFit"
    , defaultColDef=dict(filter=True, resizable=True, sortable=True)
    , dashGridOptions=dict(undoRedoCellEditing=True, rowSelection="single", sideBar=dict(toolPanels=['columns', 'filters'], hiddenByDefault=False))
    , style={"height": "100%", "width": "100%"}
    , getRowId=f"params.data.name"

app.layout = ddg.ResponsiveGridLayout(
                ], id={"type": "grid_div", "index": id_index}
                , style={"height": '100%', "width": '100%', "display": "flex", "flex-direction": "column", "flex-grow": "0", "background-color": "#2d3436", "padding": '0px 0px 0px 0px'}
            ), style={'height': '100%', 'width': '100%', 'display': 'flex', 'flex-direction': 'columns', 'flex-grow': '0'}
    ], style={"background-color": "red"}

if __name__ == '__main__':
    app.run_server(host='', port=5080)

I am not sure if you found your solution, but here is what I did.

The CSS class which is used for the top is

.item-top:hover {
  background-color: transparent !important;
.item-top:active {
  background-color: transparent !important;
  cursor: grabbing;

I made it transparent, but you can use the class to style the top to your needs.