Skip to content

Styling

Keen to mix up your report? You can change the font, background colour and text alignment to match your brand guidelines or personal aesthetics. There are two methods for doing this: via the API, and via the Report Settings page.

Python API

When you create a report, you can override the default styling properties by passing in a ReportFormatting object as follows:

import datapane as dp

report = dp.Report("Test Report")

report.save(
    path="styling-python-api.html",
    formatting=dp.ReportFormatting(
        light_prose=False,
        accent_color="orange",
        bg_color="#EEE",
        text_alignment=dp.TextAlignment.RIGHT,
        font=dp.FontChoice.MONOSPACE,
        width=dp.ReportWidth.MEDIUM,
    ),
)

There are currently six styling properties supported:

1.Light Prose

Boolean which controls whether the text appears as light (good for dark mode), or dark (default).

2. Accent Colour

Controls the colour of certain UI elements e.g. page titles, selects, DataTable headings. Can be any of the 140 CSS colour names or an RGB hex code.

3. Background Colour

Controls the background colour of the page. Can be any of the 140 CSS colour names or an RGB hex code.

4. Text Alignment

Controls how the text is aligned - can be any of JUSTIFY, LEFT (default), RIGHT, CENTER.

5. Font

Controls the font for the prose text - can be any of DEFAULT, SANS, SERIF, MONOSPACE.

6. Width

Controls the horizontal width of the report - can be any of NARROW, MEDIUM (default), FULL.

Report Settings Page

You can also edit these properties through the Visual Settings section of the Report Settings page.

You'll see a CSS block here, where you can edit the default values. The same options apply as specified for the Python API above.

:root {
    --dp-accent-color: #4E46E5;
    --dp-bg-color: #FFF;
    --dp-text-align: justify;
    --dp-font-family: Inter var, ui-sans-serif, system-ui;
}

Info

Datapane Teams users have additional functionality for loading in custom fonts and header images into a global styling block that applies to all reports. To learn more, check out the section on Styling and Whitelabelling.