Add an optional dark mode for embedded problem pages and submission pages

[tanmaythegreat]

I would like to suggest a feature that could make solving problems more comfortable during long coding sessions.

Motivation

I primarily use dark themes throughout my IDE and browser. While LeetCode remembers my account preference and opens in dark mode, Codeforces does not currently provide a built-in dark mode. In my regular browser, I use an extension to apply a dark theme.

However, when problem or submission pages are opened inside the plugin, I do not have access to those browser extensions, so the pages are displayed in the default light theme.

Proposed Improvement

It would be great to have a Dark Mode toggle in the plugin's settings that controls the appearance of embedded web pages.
Some possible approaches could be:
> Codeforces: Inject a custom CSS stylesheet (or apply a dark theme) to the embedded page.
> LeetCode: Respect the plugin's dark mode setting by switching the site's appearance accordingly, if possible, using the user's preferences or the site's supported theme mechanism.

The exact implementation is, of course, up to you. The main goal is to have a consistent dark appearance across all embedded competitive programming platforms.

Benefits

  Consistent appearance with the IDE's dark theme.
  Reduced eye strain during long programming sessions.
  A more uniform experience across different competitive programming platforms.

I understand that this may be challenging depending on how the embedded browser works and what each platform allows. Nevertheless, I wanted to suggest it as an optional feature that many users who prefer dark themes might appreciate.

[dj258255]

Thanks for this one — I use dark themes everywhere too, so this bothered me as well.

Added an "Embedded Page Theme" option in the plugin settings: follow the IDE theme (default), always light, or always dark. It works by injecting a dark stylesheet into the embedded pages on load — so Codeforces (which has no dark mode at all) now renders dark inside the plugin, with images kept in their original colors.

One detail I made sure of: before injecting, it checks whether the page is already dark — so if your LeetCode account is set to dark mode, it won't get double-inverted back to light.

The rendered problem statement follows the same setting too, and switching the theme re-renders an already-loaded problem instantly.

PR: #41

[dj258255]

Added in the v1.7.0 update. There's a new embed theme setting (Auto / Light / Dark) that applies to the Codeforces login/submission pages and to the rendered problem statement — including problems that are already loaded. Pages that are already dark (LeetCode) are left as-is.

Could you check if this covers what you wanted? I'll close this once confirmed.