feat(tailwind): port theme change event

starters/link-in-bio/config/_default/params.yaml

@@ -25,7 +25,8 @@ marketing:
 # Site header
 header:
   navbar:
-    enable: false
+    enable: true
+    blox: floating-theme-toggler
 
 # Site footer
 footer:

starters/link-in-bio/content/authors/admin/_index.md

@@ -27,15 +27,19 @@ organizations:
 # Social Networking
 # Need to use another icon? Simply download the SVG icon to your `assets/media/icons/` folder.
 social:
-  - icon: send
+  - icon: at-symbol
     link: 'mailto:your-email@example.com'
-  - icon: twitter
-    link: https://twitter.com/wowchemy
-    label: Follow me on Twitter
-  - icon: google-scholar
-    link: https://scholar.google.com/citations?user=mG4imMEAAAAJ
+  - icon: x
+    link: https://twitter.com/GetResearchDev
+    label: Follow me on X
+  - icon: instagram
+    link: https://www.instagram.com/
   - icon: linkedin
     link: https://www.linkedin.com/
+  - icon: google-scholar
+    link: https://scholar.google.com/citations?user=mG4imMEAAAAJ
+  - icon: orcid
+    link: https://www.orcid.com/
   # Link to a PDF of your resume/CV - upload it to `static/uploads/resume.pdf`
   - icon: cv
     link: uploads/resume.pdf

starters/link-in-bio/go.mod

@@ -1,8 +1,8 @@
-module github.com/HugoBlox/hugo-blox-builder/starters/blog
+module my_website
 
 go 1.19
 
 require (
 	github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2-0.20231108143325-448ed0e3bd2b
-	github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.1.1-0.20231108143325-448ed0e3bd2b
+	github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.1.1-0.20231113202655-c432620c14ce
 )

starters/link-in-bio/layouts/partials/hooks/body-end/change-background-color.html

@@ -2,10 +2,23 @@
   let bg = document.getElementById('page-bg');
   bg.style.setProperty('will-change', 'filter', '');
   let hue = 0;
+
+  // Dark mode support
+  let isDark = document.documentElement.classList.contains('dark');
+  document.addEventListener('hbThemeChange', (e) => {
+    console.debug('Theme changed - isDarkTheme? ' + e.detail.isDarkTheme());
+    isDark = e.detail.isDarkTheme();
+  });
+
   setInterval(
     function () {
       hue = (hue + 1) % 360.;
-      // For dark mode, append: invert(1) saturate(2)
-      bg.style.setProperty('filter', 'hue-rotate(' + hue + 'deg)', '');
+
+      if (isDark) {
+        bg.style.setProperty('filter', 'hue-rotate(' + hue + 'deg) invert(1) saturate(2)', '');
+      } else {
+        bg.style.setProperty('filter', 'hue-rotate(' + hue + 'deg)', '');
+      }
+
     }, (5000 / 360.));
 </script>