Add theme handling to error pages

share/jupyter/voila/templates/base/error.html

@@ -1,7 +1,17 @@
 {% extends "page.html" %}
 
+{% block stylesheets %}
+  {{ super() }}
+
+  <style>
+    .voila-error {
+      text-align: center;
+    }
+  </style>
+{% endblock %}
+
 {% block body %}
-  <div>
+  <div class="voila-error">
     <h1>{{ status_code }}: {{ status_message }}</h1>
 
     {% block error_detail %}

share/jupyter/voila/templates/lab/error.html

@@ -0,0 +1,12 @@
+{% extends "voila/templates/base/error.html" %}
+
+{% block stylesheets %}
+  {{ super() }}
+
+  <style>
+    body {
+      background-color: var(--jp-layout-color0);
+      color: var(--jp-ui-font-color0);
+    }
+  </style>
+{% endblock %}

share/jupyter/voila/templates/lab/page.html

@@ -1,14 +1,16 @@
 {%- extends 'voila/templates/base/page.html' -%}
 
 {% block stylesheets %}
-{% if theme == 'dark' %}
-    {{ include_css("static/index.css") }}
-    {{ include_css("static/theme-dark.css") }}
-{% elif theme == 'light'  %}
-    {{ include_css("static/index.css") }}
-    {{ include_css("static/theme-light.css") }}
-{% else %}
-    {{ include_css("static/index.css") }}
-    {{ include_lab_theme(theme) }}
+{% if include_css %}
+    {% if theme == 'dark' %}
+        {{ include_css("static/index.css") }}
+        {{ include_css("static/theme-dark.css") }}
+    {% elif theme == 'light'  %}
+        {{ include_css("static/index.css") }}
+        {{ include_css("static/theme-light.css") }}
+    {% else %}
+        {{ include_css("static/index.css") }}
+        {{ include_lab_theme(theme) }}
+    {% endif %}
 {% endif %}
 {% endblock %}

ui-tests/tests/voila.test.ts

@@ -161,6 +161,27 @@ test.describe('Voila performance Tests', () => {
     );
   });
 
+  test('Render 404 error', async ({ page }) => {
+    await page.goto('/voila/render/unknown.ipynb');
+    await page.waitForSelector('.voila-error');
+
+    expect(await page.screenshot()).toMatchSnapshot('404.png');
+  });
+
+  test('Render 404 error with classic template', async ({ page }) => {
+    await page.goto('/voila/render/unknown.ipynb?voila-template=classic');
+    await page.waitForSelector('.voila-error');
+
+    expect(await page.screenshot()).toMatchSnapshot('404-classic.png');
+  });
+
+  test('Render 404 error with dark theme', async ({ page }) => {
+    await page.goto('/voila/render/unknown.ipynb?voila-theme=dark');
+    await page.waitForSelector('.voila-error');
+
+    expect(await page.screenshot()).toMatchSnapshot('404-dark.png');
+  });
+
   test('Render and benchmark bqplot.ipynb', async ({
     page,
     browserName

voila/handler.py

@@ -23,7 +23,7 @@
 from ._version import __version__
 from .notebook_renderer import NotebookRenderer
 from .query_parameters_handler import QueryStringSocketHandler
-from .utils import ENV_VARIABLE
+from .utils import ENV_VARIABLE, create_include_assets_functions
 
 
 class VoilaHandler(JupyterHandler):
@@ -192,6 +192,30 @@ async def get(self, path=None):
             self.write(html)
             self.flush()
 
+    def render_template(self, name, **ns):
+        template_arg = (
+            self.get_argument("voila-template", self.voila_configuration.template)
+            if self.voila_configuration.allow_template_override == "YES"
+            else self.voila_configuration.template
+        )
+        theme_arg = (
+            self.get_argument("voila-theme", self.voila_configuration.theme)
+            if self.voila_configuration.allow_theme_override == "YES"
+            else self.voila_configuration.theme
+        )
+
+        ns = {
+            **ns,
+            **self.template_namespace,
+            **create_include_assets_functions(
+                template_arg, self.base_url
+            ),
+            "theme": theme_arg
+        }
+
+        template = self.get_template(name)
+        return template.render(**ns)
+
     def redirect_to_file(self, path):
         self.redirect(url_path_join(self.base_url, 'voila', 'files', path))