fix: improve theme compatibility for Bearded Theme (closes #258)

[Ayush9026]

📌 Related Issue
Closes #258

🐛 Problem
Some color themes, specifically "Bearded Theme Arc Eolstorm", cause poor text visibility in the Pear AI extension (v1.8.5). This happens due to text color blending into the background, making it difficult to read the content

---

Important

Adds theme-compatibility.css to improve text visibility and contrast in Pear AI extension for "Bearded Theme Arc Eolstorm".

• Behavior:
  • Adds theme-compatibility.css to ensure text visibility in Pear AI extension for "Bearded Theme Arc Eolstorm".
  • Introduces CSS variables for text and background colors to improve contrast.
  • Forces text color in .pear-text and .pear-text-secondary classes.
  • Sets background colors in .pear-container and .pear-container-secondary classes.
  • Adds high contrast mode overrides for .pear-text and .pear-text-secondary with text shadow for accessibility.

^{This description was created by for 1606039. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 1606039 in 28 seconds

More details

• Looked at 38 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. app/styles/theme-compatibility.css:2

• Draft comment:
  Using :root for variable definitions is good; ensure these values offer sufficient contrast in all supported themes.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

2. app/styles/theme-compatibility.css:10

• Draft comment:
  The use of !important forces the text color. Confirm that this override doesn’t conflict with other customizations.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

3. app/styles/theme-compatibility.css:27

• Draft comment:
  High contrast override is a nice touch for accessibility. Consider adding comments on browser support for [data-theme] if needed.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

4. app/styles/theme-compatibility.css:2

• Draft comment:
  Consider scoping these custom property definitions to the Bearded Theme context (if possible) to avoid global overrides across all themes.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

5. app/styles/theme-compatibility.css:10

• Draft comment:
  Using !important for text color ensures override, but verify it doesn’t conflict with other theme-specific styles unexpectedly.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

6. app/styles/theme-compatibility.css:19

• Draft comment:
  The container background colors are set without !important. Confirm this is sufficient and won’t be overridden by other theme styles.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

7. app/styles/theme-compatibility.css:28

• Draft comment:
  High contrast overrides with text-shadow enhance legibility. Double-check that the shadow effect doesn’t cause blurriness on different displays.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

Workflow ID: wflow_4cxI2sSKZZ5CTAIe

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.