AG Grid theme overwrites Voila theme

[DiegoF90]

Description

I have a voila that displays an AG Grid, as soon as the table is created the Voila theme is changed.

Reproduce

See below minimal reproducible example. As can be seen, the Voila page is initially shown with a dark background, after 10 seconds the page automatically turns into white background (as soon as the AG Grid is constructed).

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "from ipyaggrid import Grid\n",
    "print('Theme is dark now')\n",
    "sleep(10)\n",
    "Grid(grid_data=[{'Foo': 'spam', 'Bar': 'eggs'}], grid_options={'columnDefs': [{'field': 'Foo'}, {'field': 'Bar'}]})\n",
    "print('Theme is light now')"
   ]
  }
 ],
 "metadata": {
  "jupytext": {
   "formats": "ipynb,py:light",
   "text_representation": {
    "extension": ".py",
    "format_name": "light",
    "format_version": "1.4",
    "jupytext_version": "1.2.0"
   }
  },
  "kernelspec": {
   "display_name": "Python 3.8.10 ('env_local')",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  },
  "voila": {
   "theme": "dark"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}

---

Python 3.8.10

jupyter == 1.0.0

voila == 0.4.0

ipyaggrid == 0.4.0

[martinRenou]

cc. @maartenbreddels

[DiegoF90]

Please let me know if I can provide more information to pinpoint the issue. I am happy with any workaround too. thnx

[maartenbreddels]

Very strange behaviour! I guess this is an ipyaggrid issue. @martinRenou do you have an idea how this can be triggered?

[martinRenou]

I just looked into the ipyaggrid codebase. It seems it's pulling the entire ipywidgets + JupyterLab CSS variables styling: https://github.com/widgetti/ipyaggrid/tree/master/js/src/styles/ipywidgets

That's probably how it overwrites it?

[DiegoF90]

This seems to happen during the Grid construction, I have tried setting the flag "--VoilaConfiguration.allow_theme_override=NOTEBOOK" but the theme is still changed.

I seem to be able to force it not to override the style by explicitly running something like:

from IPython.core.display import display, HTML

display(HTML("""
<style>
    body {
        background: black !important;
        color: white !important;
    }
    pre {
        background: black !important;
        color: white !important;
    }
</style>
"""))

So I could set the dark theme explicitly and avoid ipyaggrid changing it. Is there a place I could find the body, div, etc values used by Voila's dark theme?

[DiegoF90]

@maartenbreddels I raised 40 on ipyaggrid a few weeks ago, in case you are able to provide any help there?

[maartenbreddels]

I just looked into the ipyaggrid codebase. It seems it's pulling the entire ipywidgets + JupyterLab CSS variables styling: https://github.com/widgetti/ipyaggrid/tree/master/js/src/styles/ipywidgets

That's probably how it overwrites it?

Ok, good to know it's an ipyaggrid issue! Let move over to #40