Skip to main content
Version: 0.3.x

Configuring the theme

Considering a component without any specific configurations, by default, the theme will be configured as "default".

not_themed_example.py
import dash
import dash_json_grid as djg


app = dash.Dash("demo")
app.layout = djg.DashJsonGrid(
data=[
{"key1": 1, "key2": "str"},
{"key1": True, "key2": None},
{"key1": 3.0},
{"key1": False, "key2": None, "key3": 4.0},
{"key5": "?"},
]
)

if __name__ == "__main__":
app.run()

Specify a theme by a name

The theme can be spcified by a theme name (str). Given the above example, we only need to add one property theme="moonLight" to make the theme different.

...
app.layout = djg.DashJsonGrid(
data=[
{"key1": 1, "key2": "str"},
{"key1": True, "key2": None},
{"key1": 3.0},
{"key1": False, "key2": None, "key3": 4.0},
{"key5": "?"},
],
theme="moonLight",
)
...

The available theme names are

[
"default", "dracula", "monokai", "oceanicPark", "panda",
"gruvboxMaterial", "tokyoNight", "remedy", "atlanticNight",
"defaultLight", "defaultLight2", "slime", "spacegray",
"blueberryDark", "nord", "nightOwl", "oneMonokai", "cobaltNext",
"shadesOfPurple", "codeBlue", "softEra", "atomMaterial",
"evaDark", "moonLight", "unset", "inherit"
]

The following small demo can be used as a tool to quick overviewing each theme:

Theme:

key1key2key3key5
11strundefinedundefined
2truenullundefinedundefined
33undefinedundefinedundefined
4falsenull4undefined
5undefinedundefinedundefined?

Specify a theme by a dictionary

To customize any special styles of the themes, users can specify the following typed dictionary:

...
app.layout = djg.DashJsonGrid(
data=[
{"key1": 1, "key2": "str"},
{"key1": True, "key2": None},
{"key1": 3.0},
{"key1": False, "key2": None, "key3": 4.0},
{"key5": "?"},
],
theme=djg.ThemeConfigs(
bgColor="#f5f5f5",
booleanColor="#007acc",
cellBorderColor="#c0c0c0",
highlightBgColor="#e0e0e0",
indexColor="#666666",
keyNameColor="#333333",
numberColor="#007acc",
objectColor="#333333",
searchHighlightBgColor="#cccccc",
stringColor="#2ca22c",
tableBorderColor="#d3d3d3",
tableHeaderBgColor="#dddddd",
tableHeaderColor="#333333",
),
)
...

where the highlighted djg.ThemeConfigs(...) is a TypedDict.

Specify a theme by theme=inherit and a global stylesheet

If users prefer to provide the styles by a global CSS/SCSS stylesheet, a good approach is to let theme=inherit and specify the theme properties like this:

body .special-djg-style {
--jg-bg-color: #fff;
--jg-boolean-color: #00f;
--jg-cell-border-color: #ddd;
--jg-highlight-bg-color: #c1def133;
--jg-index-color: #00f;
--jg-key-name-color: #32373b;
--jg-number-color: #007acc;
--jg-object-color: #00009f;
--jg-search-highlight-bg-color: #8885;
--jg-string-color: #a31515;
--jg-table-border-color: #a5a5a5;
--jg-table-header-bg-color: #ddd;
--jg-table-header-color: #333;
}

After that, the component can be specified like this:

from dash import html
...
app.layout = html.Div(
className="special-djg-style",
children=djg.DashJsonGrid(
data=[
{"key1": 1, "key2": "str"},
{"key1": True, "key2": None},
{"key1": 3.0},
{"key1": False, "key2": None, "key3": 4.0},
{"key5": "?"},
],
theme="inherit",
)
)
...
info

Using "inherit" | "unset" is a new feature provided by dash-json-grid since v0.3.2. The original component (react-json-grid) does not support this feature yet.