✨ feature: Implement dynamic browser chrome tinting for header and footer visibility

static/js/theme.js

@@ -9,6 +9,7 @@ import tagExternalLinks from './modules/TagExternalLinks.js';
 import Navigation from './modules/Navigation.js';
 import initRecentPostsCarousels from './modules/RecentPostsCarousel.js';
 import { initContactInfoMap } from './modules/ContactInfoMap.js';
+import initChromeTint from './modules/ChromeTint.js';
 
 // Add passive event listeners
 ! function (e) {
@@ -76,6 +77,10 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize Contact Info Leaflet maps.
     initContactInfoMap();
 
+    // Tint the browser chrome (status bar + home indicator) to match
+    // the site header/footer when those elements are in view.
+    initChromeTint();
+
     // Add Back to Top button to body
     // const backToTop = document.createElement('x-back-to-top');
     // document.body.appendChild(backToTop);