variant: signal variant switch as event #614

exampleSite/content/basics/customization/_index.en.md

@@ -114,6 +114,17 @@ If you don't like that, you can set `themeVariantAuto`. The first element is the
 This is not supported for Internet Explorer 11, which still displays in the `relearn-light` variant.
 {{% /notice %}}
 
+
+### JavaScript
+
+Once a variant is fully loaded, either initially or by switching the variant manually with the variant selector, the custom event `themeVariantLoaded` on the `document` will be dispatched. You can add an event listener and react to changes.
+
+````javascript
+document.addEventListener( 'themeVariantLoaded', function( e ){
+  console.log( e.detail.variant ); // `relearn-light`
+});
+````
+
 ### Roll your own
 
 If you are not happy with the shipped variants you can either copy and rename one of the shipped files from `themes/hugo-theme-relearn/static/css` to `static/css`, edit them afterwards to your liking in a text editor and configure the `themeVariant` parameter in your `config.toml` or just use the [interactive variant generator]({{%relref "basics/generator" %}}).

exampleSite/content/basics/migration/_index.en.md

@@ -22,6 +22,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has added two new color variants `zen-light` and `zen-dark`.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now [dispatches the custom event]({{%relref "basics/customization/#javascript" %}}) `themeVariantLoaded` on the `document` when the variant is fully loaded either initially or by switching the variant manually with the variant selector.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 10.3.1. This adds support for the [sankey diagram type]({{% relref "shortcodes/mermaid#sankey" %}}) and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Translation into Hungarian.

static/js/theme.js

@@ -1328,6 +1328,19 @@ function initSearch() {
     window.relearn.runInitialSearch && window.relearn.runInitialSearch();
 }
 
+function updateTheme( detail ){
+    if( window.relearn.lastVariant == detail.variant ){
+        return;
+    }
+    window.relearn.lastVariant = detail.variant;
+
+    initMermaid( true );
+    initOpenapi( true );
+    document.dispatchEvent( new CustomEvent( 'themeVariantLoaded', {
+        detail: detail
+    }));
+}
+
 ready( function(){
     initArrowNav();
     initMermaid();

static/js/variant.js

@@ -75,8 +75,7 @@ var variants = {
 		var interval_id = setInterval( function(){
 			if( this.isVariantLoaded() ){
 				clearInterval( interval_id );
-				initMermaid( true );
-				initOpenapi( true );
+				updateTheme({ variant: variant });
 			}
 		}.bind( this ), 25 );
 		// remove selection, because if some uses an arrow navigation"