From ca06b0060cb5e264f2c31e5de267373195b4dbf8 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Thu, 14 Mar 2024 14:12:16 +0100
Subject: [PATCH] fix: load theme earlier when using SSG

---
 .../solara_enterprise/ssg.py                  |   2 +
 solara/server/server.py                       |   5 +-
 solara/server/templates/solara.html.j2        | 107 ++++++++++--------
 3 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/packages/solara-enterprise/solara_enterprise/ssg.py b/packages/solara-enterprise/solara_enterprise/ssg.py
index 89f54c7df..da6071f14 100644
--- a/packages/solara-enterprise/solara_enterprise/ssg.py
+++ b/packages/solara-enterprise/solara_enterprise/ssg.py
@@ -205,6 +205,8 @@ def _ssg_data(html: str) -> Optional[SSGData]:
     rendered_styles = soup.find_all("style")
     for style in rendered_styles:
         style_html = str(style)
+        if 'class="solara-template-css"' in style_html:
+            continue
         # in case we want to skip the mathjax css
         # if "MJXZERO" in style_html:
         #     continue
diff --git a/solara/server/server.py b/solara/server/server.py
index e5706178b..021be9dc2 100644
--- a/solara/server/server.py
+++ b/solara/server/server.py
@@ -13,7 +13,6 @@
 import ipywidgets
 import jinja2
 import requests
-
 import solara
 import solara.routing
 import solara.settings
@@ -302,9 +301,9 @@ def include_css(path: str) -> Markup:
             code = content_utf8
         elif embed:
             content_utf8 = content.decode("utf-8")
-            code = f"<style>/*\npath={path}\n*/\n{content_utf8}</style>"
+            code = f'<style class="solara-template-css">/*\npath={path}\n*/\n{content_utf8}</style>'
         else:
-            code = f'<link rel="stylesheet" type="text/css" href="{url}">'
+            code = f'<link rel="stylesheet" type="text/css" href="{url}" class="solara-template-css">'
         return Markup(code)
 
     def include_js(path: str, module=False) -> Markup:
diff --git a/solara/server/templates/solara.html.j2 b/solara/server/templates/solara.html.j2
index 329800c7c..0e91abff1 100644
--- a/solara/server/templates/solara.html.j2
+++ b/solara/server/templates/solara.html.j2
@@ -11,13 +11,11 @@
 
     {% block header %}
 
-
     {{ pre_rendered_css | safe }}
-
     {% if vue3 == True %}
-    <link href="{{cdn}}/@widgetti/solara-vuetify3-app@5.0.1/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
+    <link href="{{cdn}}/@widgetti/solara-vuetify3-app@5.0.1/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
     {% else %}
-    <link href="{{cdn}}/@widgetti/solara-vuetify-app@10.0.1/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
+    <link href="{{cdn}}/@widgetti/solara-vuetify-app@10.0.1/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
     {% endif %}
 
 
@@ -27,7 +25,7 @@
     {{ resources.include_css("/static/highlight.css") }}
     {{ resources.include_css("/static/highlight-dark.css") }}
     {{ resources.include_css("/static/assets/style.css") }}
-    <style id="jupyter-theme-css">
+    <style id="jupyter-theme-css" class="solara-template-css">
         {{ resources.include_css("/static/assets/theme-"~theme.variant~".css") }}
     </style>
     {{ resources.include_css("/static/assets/custom.css") }}
@@ -38,9 +36,22 @@
         "kernelId": "1234"
     }
     </script>
-    <style>
+    <style class="solara-template-css">
         {% include "loader-"~theme.loader~".css" %}
     </style>
+    <style id="pre-render-theme">
+    .theme--light .v-sheet {
+        background-color: #fff;
+        border-color: #fff;
+        color: rgba(0,0,0,.87)
+    }
+
+    .theme--dark .v-sheet {
+        background-color: #1e1e1e;
+        border-color: #1e1e1e;
+        color: #fff
+    }
+</style>
     {% endblock header %}
 </head>
 {% raw -%}
@@ -175,6 +186,46 @@
         {# next div is used in ssg code to see if vue took over rendering #}
         <div id="pre-rendered-html-present" style="display: none"></div>
     </div>
+    <script>
+        solara.rootPath = {{ root_path | tojson | safe}};
+        console.log("rootPath", solara.rootPath);
+
+        var theme = {{ theme | tojson | safe }}
+        function getThemeVariant() {
+            if (localStorage.getItem(':solara:theme.variant')) {
+                return JSON.parse(localStorage.getItem(':solara:theme.variant'))
+            }
+            return theme.variant;
+        }
+        if (localStorage.getItem(':solara:theme.variant')) {
+            theme.variant = JSON.parse(localStorage.getItem(':solara:theme.variant'))
+        }
+        function prefersDarkScheme() {
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        }
+        function inDarkMode() {
+            if (getThemeVariant() == 'auto') {
+                return prefersDarkScheme();
+            }
+            else {
+                return getThemeVariant() == 'dark';
+            }
+        }
+        // Init theme
+        let app_container = document.getElementById('app');
+        if (inDarkMode()) {
+            app_container.classList.remove('theme--light');
+            app_container.classList.add('theme--dark');
+        } else {
+            app_container.classList.remove('theme--dark');
+            app_container.classList.add('theme--light');
+        }
+        async function changeThemeCSS(theme) {
+            let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
+            document.getElementById('jupyter-theme-css').innerHTML = css;
+        }
+        changeThemeCSS(inDarkMode() ? 'dark' : 'light');
+    </script>
     {% block after_pre_rendered_html %}{% endblock %}
     {% if vue3 == True %}
         <link href="{{cdn}}/@widgetti/solara-vuetify3-app@5.0.1/dist/fonts.css" rel="stylesheet"></link>
@@ -191,10 +242,6 @@
         <script src="{{cdn}}/@widgetti/solara-vuetify-app@10.0.1/dist/solara-vuetify-app{{ipywidget_major_version}}.js"></script>
         {% endif %}
     {% endif %}
-    <script>
-        solara.rootPath = {{ root_path | tojson | safe}};
-        console.log("rootPath", solara.rootPath);
-    </script>
 
     {{ resources.include_js("/static/assets/custom.js") }}
     {{ resources.include_js("/static/assets/theme.js") }}
@@ -208,27 +255,6 @@
         solara.production = {{ production | tojson | safe }};
         const themeVariants = ['light', 'dark', 'auto']
         solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
-        var theme = {{ theme | tojson | safe }}
-        function getThemeVariant() {
-            if (localStorage.getItem(':solara:theme.variant')) {
-                return JSON.parse(localStorage.getItem(':solara:theme.variant'))
-            }
-            return theme.variant;
-        }
-        if (localStorage.getItem(':solara:theme.variant')) {
-            theme.variant = JSON.parse(localStorage.getItem(':solara:theme.variant'))
-        }
-        function prefersDarkScheme() {
-            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-        }
-        function inDarkMode() {
-            if (getThemeVariant() == 'auto') {
-                return prefersDarkScheme();
-            }
-            else {
-                return getThemeVariant() == 'dark';
-            }
-        }
     </script>
 
     <script>
@@ -256,11 +282,7 @@
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                     this.$vuetify.theme.dark = inDarkMode();
                 });
-                if (this.$vuetify.theme.dark) {
-                    this.changeThemeCSS('dark');
-                } else {
-                    this.changeThemeCSS('light');
-                }
+                document.getElementById('pre-render-theme').remove();
             },
             methods: {
                 stateReset() {
@@ -275,10 +297,6 @@
                 reload() {
                     location.reload();
                 },
-                async changeThemeCSS(theme) {
-                    let css = await fetch(`${solara.rootPath}/static/assets/theme-${theme}.css`).then(r => r.text());
-                    document.getElementById('jupyter-theme-css').innerHTML = css;
-                }
             },
             watch: {
                 kernelBusy: function (value) {
@@ -325,15 +343,14 @@
                     }
                 },
                 '$vuetify.theme.dark': function (value) {
-                    let app = document.getElementById('app');
                     if ( value ) {
                         this.changeThemeCSS('dark');
-                        app.classList.remove('theme--light');
-                        app.classList.add('theme--dark');
+                        app_container.classList.remove('theme--light');
+                        app_container.classList.add('theme--dark');
                     } else {
                         this.changeThemeCSS('light');
-                        app.classList.remove('theme--dark');
-                        app.classList.add('theme--light');
+                        app_container.classList.remove('theme--dark');
+                        app_container.classList.add('theme--light');
                     }
                 }
             },