Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: load theme earlier when using SSG #557

Merged
merged 3 commits into from
Mar 19, 2024
Merged

fix: load theme earlier when using SSG #557

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a7ab230
fix: load theme earlier when using SSG
iisakkirotko Mar 14, 2024
1388b07
implement suggestions from code review
iisakkirotko Mar 14, 2024
183c1ad
Apply suggestions from code review
iisakkirotko Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/solara-enterprise/solara_enterprise/ssg.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
iisakkirotko marked this conversation as resolved.
Show resolved Hide resolved
# in case we want to skip the mathjax css
# if "MJXZERO" in style_html:
# continue
Expand Down
5 changes: 2 additions & 3 deletions solara/server/server.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
import ipywidgets
import jinja2
import requests

import solara
import solara.routing
import solara.settings
Expand Down Expand Up @@ -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:
Expand Down
104 changes: 62 additions & 42 deletions solara/server/templates/solara.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@

{% block header %}


{{ pre_rendered_css | safe }}

{% if vue3 == True %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
{% else %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet"></link>
<link href="{{cdn}}/@widgetti/[email protected]/dist/main{{ipywidget_major_version}}.css" rel="stylesheet" class="solara-template-css"></link>
{% endif %}


Expand All @@ -27,8 +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">
{{ resources.include_css("/static/assets/theme-"~theme.variant~".css") }}
<style id="jupyter-theme-css" class="solara-template-css">
</style>
{{ resources.include_css("/static/assets/custom.css") }}

Expand All @@ -38,9 +35,24 @@
"kernelId": "1234"
}
</script>
<style>
<style class="solara-template-css">
{% include "loader-"~theme.loader~".css" %}
</style>
<!-- Include Vuetify background colours so static html from SSG renders the right general colour theme
before first render. We remove these after Vue takes over rendering to avoid collisions -->
<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>
iisakkirotko marked this conversation as resolved.
Show resolved Hide resolved
{% endblock header %}
</head>
{% raw -%}
Expand Down Expand Up @@ -175,6 +187,38 @@
{# 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>
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 appContainer = document.getElementById('app');
if (inDarkMode()) {
appContainer.classList.remove('theme--light');
appContainer.classList.add('theme--dark');
} else {
appContainer.classList.remove('theme--dark');
appContainer.classList.add('theme--light');
}
</script>
{% block after_pre_rendered_html %}{% endblock %}
{% if vue3 == True %}
<link href="{{cdn}}/@widgetti/[email protected]/dist/fonts.css" rel="stylesheet"></link>
Expand All @@ -194,6 +238,12 @@
<script>
solara.rootPath = {{ root_path | tojson | safe}};
console.log("rootPath", solara.rootPath);
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>

{{ resources.include_js("/static/assets/custom.js") }}
Expand All @@ -208,27 +258,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>
Expand Down Expand Up @@ -256,11 +285,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() {
Expand All @@ -275,10 +300,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) {
Expand Down Expand Up @@ -325,15 +346,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');
appContainer.classList.remove('theme--light');
appContainer.classList.add('theme--dark');
} else {
this.changeThemeCSS('light');
app.classList.remove('theme--dark');
app.classList.add('theme--light');
appContainer.classList.remove('theme--dark');
appContainer.classList.add('theme--light');
}
}
},
Expand Down
Loading