Main Site Theme Synchronization Update

Main Site Theme Synchronization Update

The blog now passes theme parameters back to the main site. To complete the bidirectional sync, add this code to the main site’s components.js:

Add to initDarkMode function (after line 119):

// Check URL parameter for theme from blog
const urlParams = new URLSearchParams(window.location.search);
const themeParam = urlParams.get('theme');

if (themeParam) {
  // Save theme from blog and remove parameter from URL
  localStorage.setItem('theme', themeParam);
  // Clean URL without reload
  const cleanUrl = window.location.pathname + window.location.hash;
  window.history.replaceState({}, document.title, cleanUrl);
  
  // Apply the theme immediately
  if (themeParam === 'dark') {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
}

How it works:

1. Blog → Main Site: When users click the “Main Site” link from the blog, it includes ?theme=dark or ?theme=light
2. Main Site Processing: The main site detects this parameter, saves it to localStorage, and applies it
3. Clean URLs: The parameter is removed from the URL for a cleaner appearance
4. Persistence: Both sites remember the theme preference independently

This creates a seamless experience where:

• Navigating from main site to blog preserves the theme
• Navigating from blog to main site preserves the theme
• Changing theme on either site updates links to the other
• Users can still override on each site if needed

The implementation is already complete on the blog side - just needs the URL parameter handling on the main site.