Dash Draggable Styling in Dark Mode

Dash Python
1

Hi,

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.

image
image935×322 6.82 KB

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?

Regards
Sudhir

2

Hello @smalgotrader,

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

3

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.

image
image949×328 7.03 KB

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(
    __name__
    , 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(
    [
        html.Div(
            html.Div(
                children=[
                    grid,
                ], 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='0.0.0.0', port=5080)
4

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.

3 Likes