Use CSS variabel for theme switching

[mazipan]

Any plan to support CSS variable? It can unlock possibilities to support multiple theme such as dark and light mode without the need to reload the whole script.

[YashMA2028]

✅ The Solution (Theoretical)
To fix this in a clean and modern way, here’s what Utterances could do:

1. Use CSS Variables Internally
   Inside the iframe, Utterances should use CSS variables for its colors (like background, text, and links). This would allow the colors to be updated dynamically, just by changing those variable values.

2. Allow Communication from the Main Page
   Since the iframe can’t access the main page’s styles directly, the main page (your site) can send a message to the Utterances iframe using a browser feature called postMessage. This is a safe and standard way for iframes and parent pages to talk to each other.

3. Update Theme Dynamically
   When your site changes its theme (for example, a user clicks a “dark mode” toggle), it can send a message to the Utterances iframe with the new color values. The iframe would then update its styles immediately, without needing to reload.

🧪 What Needs to Change in Utterances
For this to work, Utterances would need to:

Support CSS variables inside its own code.

Add a listener inside the iframe that waits for messages from the parent page.

When a message is received, it updates the styles using the new theme.

🌟 Benefits
Smooth transitions between light and dark themes.

No reloads or flashing.

More modern and flexible theming, especially for apps that support user preferences or system themes.