Skip to content

Styling a single app

Keen to mix up your app? 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 App Settings page.

Python API

When you create an app, you can override the default styling properties by passing in a AppFormatting object as follows:

import datapane as dp

app = dp.App("Test App")

app.save(
    path="styling-python-api.html",
    formatting=dp.AppFormatting(
        light_prose=False,
        accent_color="orange",
        bg_color="#EEE",
        text_alignment=dp.TextAlignment.RIGHT,
        font=dp.FontChoice.MONOSPACE,
        width=dp.AppWidth.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 app - can be any of NARROW, MEDIUM (default), FULL.

Layout

Although you are probably analyzing data in a list of sequential steps, it may not the best way to present results -- especially if you are sharing with people who are used to a traditional dashboard or BI tool.

Datapane's app library provides blocks which allow for more flexible grid-style layouts, multiple pages, tabs, and selects, which allows you to create powerful custom interfaces without knowledge of HTML or CSS.

App Settings Page

You can also edit these properties through the Visual Settings section of the App 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;
}