Feature: Sync injected UI theme (light/dark) with popup setting

[dineshsutihar]

Is your feature request related to a problem?
The extension popup has a light/dark mode toggle, but the injected UI with the translated code always uses a default theme. This creates a visual inconsistency for users who prefer a dark theme.

Describe the solution you'd like
The injected UI's Shadow DOM should check the theme preference stored in chrome.storage.sync. Based on the saved theme ('light' or 'dark'), a class should be applied to the UI container to match the user's chosen theme.

Additional context
This will involve reading the theme from storage in content.js and adding CSS variables or classes within the componentStyles string in the ui.js module to handle the different color schemes.

[hemanth5055]

Hey @dineshsutihar , I would like to work on this issue please assign it to me!

[dineshsutihar]

@hemanth5055 , I have assigned it to you.

[dineshsutihar]

@hemanth5055 Any update on this?

[hemanth5055]

@hemanth5055 Any update on this?

Hey @dineshsutihar, I just completed my uni exams yesterday. I’ll be working on this today and will update you by tonight.

[dineshsutihar]

Great, thanks for letting me know. Hope your exams went well. I’ll wait for your update.

[hemanth5055]

Hey @dineshsutihar,
As per the issue you mentioned regarding the theme inconsistency, I have implemented the light/dark mode support for the injected UI. The wrapper now gets a light or dark class based on the value stored in chrome.storage.sync(), and the styling updates accordingly.

I’d like to share the changes with you so that if everything looks good, I can go ahead and create a PR for it.

Dark :

Light :

[dineshsutihar]

This looks good, but I was wondering if we could sync the code window as well.

[hemanth5055]

I think adding a new prism-light.css file to define light-mode colour scheme can full-fill our requirements.

[dineshsutihar]

@hemanth5055 Yup, you are right as we are using prism for code highlighting this, adding new prism-light.css file will do our work.