# Altair Theming

**URL:** <https://discourse.holoviz.org/t/altair-theming/1421>\
**Category:** Panel\
**Created:** [November 11, 2020, 4:53am UTC](https://discourse.holoviz.org/t/altair-theming/1421 "2020-11-11T04:53:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 11, 2020, 4:53am UTC](https://discourse.holoviz.org/t/altair-theming/1421/1 "2020-11-11T04:53:59Z")

</div>

I wanted to use Altair plots with the new ReactTemplate and Dark theme. So the plots should also use a dark theme. I figured I wanted to showcase and share how to do it here.

My solution was to use the built in Altair Dark Theme via `alt.themes.enable("dark")`.

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/8/828a3bcbe3d2cc5bc2c33e9a28c420b13ed069f0.png)

```python
import altair as alt
import panel as pn
from vega_datasets import data

alt.themes.enable("dark")

# draw the chart
cars = data.cars()
chart = alt.Chart(cars, width='container', height='container',).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
)

plot_pane = pn.pane.Vega(chart, sizing_mode="stretch_both")

layout = pn.template.ReactTemplate(
    site="Awesome Panel",
    title="Altair Plots",
    theme=pn.template.react.DarkTheme,
    row_height=300,
)
layout.main[0, 0:6] = plot_pane
layout.main[0, 6:12] = plot_pane.clone()
layout.main[1, 0:6] = plot_pane.clone()
layout.main[1, 6:12] = plot_pane.clone()
layout.servable()

```

It’s described in the Altair docs [https://altair-viz.github.io/user\_guide/configuration.html#changing-the-theme](https://altair-viz.github.io/user_guide/configuration.html#changing-the-theme)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 11, 2020, 5:00am UTC](https://discourse.holoviz.org/t/altair-theming/1421/2 "2020-11-11T05:00:36Z")

</div>

A step on the way for me was also realizing that it’s possible to define and use CUSTOM THEMES via

```python
# register the custom theme under a chosen name
alt.themes.register('black_marks', black_marks)

# enable the newly registered theme
alt.themes.enable('black_marks')

```

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/6/6988a22357acede86b9cd15515ad74a3850abefb.png)

```python
import altair as alt
import panel as pn
from vega_datasets import data

# define the theme by returning the dictionary of configurations
def black_marks():
    return {
        'config': {
            'view': {
                'height': 300,
                'width': 400,
            },
            'mark': {
                'color': 'black',
                'fill': 'black'
            }
        }
    }

# register the custom theme under a chosen name
alt.themes.register('black_marks', black_marks)

# enable the newly registered theme
alt.themes.enable('black_marks')
# draw the chart
cars = data.cars()
chart = alt.Chart(cars, width='container', height='container',).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
)

plot_pane = pn.pane.Vega(chart, sizing_mode="stretch_both")

layout = pn.template.ReactTemplate(
    site="Awesome Panel",
    title="Altair with Custom Theme",
    theme=pn.template.react.DarkTheme,
    row_height=300,
)
layout.main[0, 0:6] = plot_pane
layout.main[0, 6:12] = plot_pane.clone()
layout.main[1, 0:6] = plot_pane.clone()
layout.main[1, 6:12] = plot_pane.clone()
layout.servable()

```

It’s described in the Altair docs [https://altair-viz.github.io/user\_guide/configuration.html#defining-a-custom-theme](https://altair-viz.github.io/user_guide/configuration.html#defining-a-custom-theme)