CODEWITHSUNDEEP
pythoncssplotly-dash
Atorpat
Atorpat

Reputation: 446

How to customise PlotlyDash core components theme?

Recently I have started working with PlotlyDash, and I want to build a few dashboards with it.

Now I want to apply a certain theme on all used components to acquire a consistent desired look.

As an example consider this checklist item:

import dash_core_components as dcc

dcc.Checklist(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=['NYC', 'MTL']
)

I have noticed you can apply different styles to this component through two arguments, namely "style" and "labelStyle".

Like this one:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.RadioItems(
        options=[
            {"label": "Option 1", "value": 1},
            {"label": "Option 2", "value": 2},
            {"label": "Option 3", "value": 3},
        ]
    ),
    id="radioitems",
    style={"padding": "10px", "max-width": "800px", "margin": "auto"},
)

However, I don't know what values can be passed to these arguments and I couldn't find a comprehensive list of all available options.

As an example, I want the boxes in the checklist, to follow this format:

.Rectangle {
width: 20px;
  height: 20px;
  padding: 6px 4px 5px 4px;
  background-color: var(--colors-primary-a-500);
}

I would like to see all the customisation options if possible. Are these values all CSS properties?

(Sorry if the question is trivial. I have little experience with frontend)

Upvotes: 0

Views: 1004

Answers (1)

AS11
AS11

Reputation: 1461

There is a way to override the template that is created by the initial app using CSS and JS and you can find out more through this link: https://dash.plotly.com/external-resources

From The Link:

Including custom CSS or JavaScript in your Dash apps is simple. Just create a folder named assets in the root of your app directory and include your CSS and JavaScript files in that folder. Dash will automatically serve all of the files that are included in this folder. By default the url to request the assets will be /assets but you can customize this with the assets_url_path argument to dash.Dash.

Important: For these examples, you need to include name in your Dash constructor.

That is, app = dash.Dash(name) instead of app = dash.Dash(). Here's why.

Example: Including Local CSS and JavaScript We'll create several files: app.py, a folder named assets, and three files in that folder:

- app.py
- assets/
    |-- typography.css
    |-- header.css
    |-- custom-script.js

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(
        className="app-header",
        children=[
            html.Div('Plotly Dash', className="app-header--title")
        ]
    ),
    html.Div(
        children=html.Div([
            html.H5('Overview'),
            html.Div('''
                This is an example of a simple Dash app with
                local, customized CSS.
            ''')
        ])
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
typography.css

body {
    font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    color: hotpink
}
header.css

.app-header {
    height: 60px;
    line-height: 60px;
    border-bottom: thin lightgrey solid;
}

.app-header .app-header--title {
    font-size: 22px;
    padding-left: 5px;
}

Upvotes: 2

Related Questions