c788a30202
The theme toggle button now has a third option, which follows the user's
system preferences.
- In the code there's now a distinction between the theme setting (which
can be "dark", "light" or "system") and the computed theme.
- The theme setting is now stored as the "theme-setting" local storage
variable. Since this is different from the old variable ("theme"), this
will effectively reset all current user themes to the default "system".
Maybe this is not what you want.
- The "system" theme icon is currently a half circle symbol.
- The toggle button now displays the current theme setting, rather than
the next theme setting (as far as I know this is consistent with other
sites which have three theme options).
- `theme.js` is now loaded regardless of `site.enable_darkmode`. This is
because other scripts which were always loaded relied on being able to
determine the theme. `theme.js` no longer initialises the theme itself
though; this only happens when `site.enable_darkmode`.
- When the theme setting is "system", the theme will change immediately
whenever the user changes their system theme.
#2261
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: George Araujo <george.gcac@gmail.com>
48 lines
1.7 KiB
Plaintext
48 lines
1.7 KiB
Plaintext
{% if page.chart and page.chart.vega_lite %}
|
|
<script
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/vega@{{ site.vega.version }}/build/vega.min.js"
|
|
integrity="{{ site.vega.integrity }}"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.vega-lite.version }}/build/vega-lite.min.js"
|
|
integrity="{{ site.vega-lite.integrity }}"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.vega-embed.version }}/build/vega-embed.min.js"
|
|
integrity="{{ site.vega-embed.integrity }}"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<script>
|
|
let theme = determineComputedTheme();
|
|
|
|
/* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
|
|
this is done to enable retrieving the code again when changing theme between light/dark */
|
|
document.onreadystatechange = () => {
|
|
if (document.readyState === 'complete') {
|
|
document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
|
|
const jsonData = elem.textContent;
|
|
const backup = elem.parentElement;
|
|
backup.classList.add('unloaded');
|
|
/* create vega lite node */
|
|
let chartElement = document.createElement('div');
|
|
chartElement.classList.add('vega-lite');
|
|
backup.after(chartElement);
|
|
|
|
/* Embed the visualization in the container */
|
|
if (theme === 'dark') {
|
|
vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
|
|
} else {
|
|
vegaEmbed(chartElement, JSON.parse(jsonData));
|
|
}
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
{% endif %}
|