Dash Style Design

When developing interactive web applications, Dash not only allows you to use Python to build complex applications, but also provides rich styling options to make your applications look more professional and polished.

In Dash, styling is implemented through CSS. Dash offers multiple ways to set component styles, including:

  • inline style: throughstyleSet component styles directly via properties.

  • External CSS file: Set global styles by loading external CSS files.

  • Dash Bootstrap Components: Use Bootstrap-style components and styles.

  • Dash DAQ: Style components for creating data acquisition and control applications.

1. Inline styles

Through the style attribute, you can directly set CSS styles for components. style is a dictionary, with keys as CSS properties and values as CSS values.

Example

from dash import Dash, html

# Create Dash App
app = Dash(__name__)

# Define Layout
app.layout = html.Div(
    style={
        'backgroundColor': 'lightblue',  # Background Color
        'padding': '20px',  # Padding
        'borderRadius': '10px',  # Rounded Corners
        'textAlign': 'center'  # Center Text
    },
    children=[
        html.H1("Welcome to Dash", style={'color': 'darkblue'}),
        html.P("This is a styled Div.")
    ]
)

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Running effect:

  • The background color is light blue, padding is 20px, border radius is 10px, and text is centered.

  • The title text color is dark blue.

2. External CSS file

By loading external CSS files, you can set global styles for the entire application.

  1. Create a CSS file (e.g.assets/styles.css）。

  2. Load CSS files in a Dash application.

CSS file example (assets/styles.css):

Example: assets/styles.css file

/* Set global font */
body {
    font-family: Arial, sans-serif;
}

/* Set title styles */
h1 {
    color: darkblue;
    text-align: center;
}

/* Set Div styles */
.custom-div {
    background-color: lightblue;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

Dash uses CSS files:

Example

from dash import Dash, html

# Create Dash App
app = Dash(__name__)

# Define Layout
app.layout = html.Div(
    className='custom-div',  # Use CSS class names
    children=[
        html.H1("Welcome to Dash"),
        html.P("This is a styled Div.")
    ]
)

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Running effect:

  • Application Loadingassets/styles.cssStyles in the file.

  • h1The heading is dark blue and centered.

  • DivThe background color is light blue, with padding and rounded corners.

3. Dash Bootstrap Components

Dash Bootstrap Components (dash-bootstrap-components) is a third-party library that provides Bootstrap-style components and styles. It can help quickly build beautiful Dash applications.

pip install dash-bootstrap-components

Example

from dash import Dash, html
import dash_bootstrap_components as dbc

# Create Dash App
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Define Layout
app.layout = dbc.Container(
    children=[
        dbc.Row(
            dbc.Col(
                html.H1(Welcome to Dash Bootstrap, className="text-center text-primary")
            )
        ),
        dbc.Row(
            dbc.Col(
                dbc.Card(
                    children=[
                        dbc.CardHeader("Card Title"),
                        dbc.CardBody(
                            children=[
                                html.P("This is a Bootstrap-style card.", className="card-text")
                            ]
                        )
                    ],
                    className="mt-4"  # Set margin
                )
            )
        )
    ]
)

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Running effect:

  • Use Bootstrap theme styles.

  • The title is centered and displayed in theme blue.

  • The card component includes a title and content, with an elegant style.

4. Dash DAQ

Dash DAQ is a component library for creating data acquisition and control applications, providing a rich set of styled components.

pip install dash-daq

Example

from dash import Dash, html
import dash_daq as daq

# Create Dash App
app = Dash(__name__)

# Define Layout
app.layout = html.Div(
    style={'textAlign': 'center'},
    children=[
        daq.Thermometer(
            id='thermometer',
            value=25,
            min=0,
            max=100,
            label="Thermometer",
            style={'margin': '20px'}
        ),
        daq.Gauge(
            id='gauge',
            value=50,
            min=0,
            max=100,
            label="Pressure gauge",
            style={'margin': '20px'}
        )
    ]
)

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Running effect:

  • Display a thermometer and a pressure gauge, both with an elegant style.

  • The component is centered with margins.

other extensions