is it possible to adjust Python code based on the site theme?

[lostmygithubaccount]

Description

We want to have a light and dark theme for the Ibis website. It's nice to show visualizations with the tool, so we want to have them -- and ideally have the plotting library use a light/dark theme corresponding to the theme set for the website.

example here (see plot after scrolling down): https://ibisdocs.z5.web.core.windows.net/

relevant source code:

```{python}

from sklearn.decomposition import PCA

# select "features" as X
X = f.select(s.contains("zscore"))

# get the the first 2 principal components to visualize
n_components = 3
pca = PCA(n_components=n_components).fit(X)

# transform the table to get the principal components
t_pca = ibis.memtable(pca.transform(X)).relabel(
    {"col0": "pc1", "col1": "pc2", "col2": "pc3"}
)

# join the original table with the PCA table, assuming the order is the same
f = f.mutate(row_number=ibis.row_number().over()).join(
    t_pca.mutate(row_number=ibis.row_number().over()), "row_number"
)

# plot the first 2 principal components

import plotly.io as pio
import plotly.express as px

px.scatter_3d(f, title="penguins PCA", x="pc1", y="pc2", z="pc3", color="species", template="plotly_dark")

if this is possible already, that'd be great to know! if not, would this be a valid feature request? some way to get a variable in Python snippets so that template in the above example or similar for other visualization libraries can be set appropriately

full source code: https://github.com/lostmygithubaccount/ibis/tree/quarto-docs

[mcanouil]

If you define the theme for the graphic library you are using, a simple JavaScript script can do the job, see an example with R/knitr: https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/.

[lostmygithubaccount]

Thanks for the response! Can this be used in Python and would you have any guidance on that if so? Our docs (for Ibis) want to show off plotting w/ Python libraries like Altair, Plotly, and plotnine (or any that support the __dataframe__ protocol. We want to have both light mode and dark mode for parity on the new Quarto site, and it would be nice if we could achieve dynamic plotting based on that setting.

[mcanouil]

The trick uses JavaScript and an image naming convention thus agnostic to the computation language.
You can also edit the JavaScript script to change the trigger, i.e., to target CSS class, etc.

As there are many plotting libraries (also true in R), you have to choose one and use the documentation of that library to build your own theme (if the library allows it).