fix: add white background to improve image visibility in dark mode

[senutpal]

Closes #416

Changes done:

• Added CSS rule in darkTheme.css to apply white background to images in dark mode
• Fix applies globally to all documentation pages
• Light mode remains unaffected

Context:

PR #454 attempted to resolve this issue by replacing images with hardcoded white backgrounds. However, a CSS-based approach was requested as it's more maintainable and doesn't require modifying individual image files. Since there has been no response for over 3 weeks on that request, I've implemented the CSS fix directly.

CSS Solution:

[data-theme='dark'] .theme-doc-markdown img {
    background-color: #ffffff;
}

Screenshots:

Before (Dark Mode):

After (Dark Mode):

✅️ By submitting this PR, I have verified the following

• Checked to see if a similar PR has already been opened 🤔️
• Reviewed the contributing guidelines 🔍️
• Sample preview link added (add a link from the checks tab after checks complete)
• Tried Squashing the commits into one

Summary by CodeRabbit

• Bug Fixes
  • Fixed image visibility in dark theme: images now render with an adjusted background so they display clearly and maintain proper contrast in dark mode, complementing existing dark-mode styling for other content.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change adds a CSS rule to the dark theme stylesheet that sets background-color: #ffffff`` for img elements inside `.theme-doc-markdown` when `data-theme='dark'`. The update targets only those images and does not modify other selectors; it complements an existing dark-mode background rule for table cells.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change: adding a white background to images for improved visibility in dark mode, which directly addresses the main objective.
Linked Issues check	✅ Passed	The PR fully implements the CSS fix required by issue #416, adding white background to images in dark mode to ensure visibility and accessibility.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the darkTheme.css file and directly addresses the dark mode image visibility issue without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 902f881 and 1376ccc.

📒 Files selected for processing (1)

• src/css/darkTheme.css

🚧 Files skipped from review as they are similar to previous changes (1)

• src/css/darkTheme.css

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/css/darkTheme.css (2)

6-8: Consider adding selective targeting for images that need backgrounds.

The current rule applies a white background to ALL documentation images. While this fixes the visibility issue, it may also affect images that are designed for dark backgrounds (e.g., screenshots of dark-themed UIs). Consider one of these approaches:

• Add a CSS class like .light-bg-img that can be selectively applied to images needing white backgrounds
• Provide an opt-out mechanism with a class like .no-bg for images designed for dark mode

🔎 Example: Selective targeting approach

 /* Fix image visibility in dark mode */
-[data-theme='dark'] .theme-doc-markdown img {
+[data-theme='dark'] .theme-doc-markdown img:not(.no-bg) {
     background-color: #ffffff;
 }

This allows specific images to opt out by adding the no-bg class when needed.

---

6-8: Optional: Consider adding padding and border-radius for visual polish.

Issue #416 mentioned optional padding and border-radius to improve the visual presentation of images with white backgrounds. These additions could soften the appearance and provide better separation from the page background.

🔎 Example: Adding visual polish

 /* Fix image visibility in dark mode */
 [data-theme='dark'] .theme-doc-markdown img {
     background-color: #ffffff;
+    padding: 8px;
+    border-radius: 4px;
 }

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bace6c5 and 902f881.

📒 Files selected for processing (1)

• src/css/darkTheme.css

🔇 Additional comments (1)

src/css/darkTheme.css (1)

5-8: LGTM! Core fix addresses the visibility issue effectively.

The CSS-only approach is more maintainable than replacing images individually. The selector correctly targets documentation images in dark mode, and the white background ensures dark image elements remain visible.

[senutpal]

@Nihal4777 Please Review This :)