fix: theme initialisation with Voilà lab template

The class names of the document's body's are checked whether they
contain 'theme-light' or 'theme-dark', which indicates the theme loaded
by Voilà for the lab template.

The patch also adds 'dark_jlab' attribute to know the inherited theme in JupyterLab.

Resolves: #135

ipyvuetify/Themes.py

@@ -36,6 +36,8 @@ class Theme(Widget):
  _model_module_version = Unicode(semver).tag(sync=True)
 
  dark = Bool(None, allow_none=True).tag(sync=True)
+
+ dark_jlab = Bool(None, allow_none=True).tag(sync=True)
 
  def __init__(self):
  super().__init__()

js/src/Themes.js

@@ -13,6 +13,7 @@ export class ThemeModel extends WidgetModel {
  _view_module_version: '0.1.11',
  _model_module_version: '0.1.11',
  dark: null,
+ dark_jlab: null,
  },
  };
  }
@@ -28,6 +29,8 @@ export class ThemeModel extends WidgetModel {
  ThemeModel.themeManager.themeChanged.connect(() => {
  if (this.get('dark') === null) {
  vuetify.framework.theme.dark = document.body.dataset.jpThemeLight === 'false';
+ this.set('dark_jlab', vuetify.framework.theme.dark);
+ this.save_changes();
  }
  }, this);
  }
@@ -36,8 +39,18 @@ export class ThemeModel extends WidgetModel {
  vuetify.framework.theme.dark = this.get('dark');
  } else if (document.body.dataset.jpThemeLight) {
  vuetify.framework.theme.dark = document.body.dataset.jpThemeLight === 'false';
+ this.set('dark_jlab', vuetify.framework.theme.dark);
+ this.save_changes();
+ } else if (document.body.classList.contains('theme-dark')) {
+ vuetify.framework.theme.dark = true;
+ this.set('dark', true);
+ this.save_changes();
+ } else if (document.body.classList.contains('theme-light')) { 
+ this.set('dark', false);
+ this.save_changes();
  }
- this.on('change:dark', () => {
+
+ this.on('change:dark', () => {
  vuetify.framework.theme.dark = this.get('dark');
  });
  }