fix: add stellar dark mode support for mobile badges and donation ban…

[Prashant1git]

What

• Upgraded the dark mode CSS selectors in both donation-banner.ts and mobile-badges.ts.
• Replaced the isolated .dark-mode classes with :host-context(.dark) to ensure these web components correctly listen to and inherit the main website's global dark theme toggle, while maintaining fallback support.

Screenshot

*

Fixes bug(s)

• Add dark theme support in mobile badges and donation banner components #177

Part of

• Add dark theme support in mobile badges and donation banner components #177

Summary by CodeRabbit

• Style
  • Expanded dark-mode styling for the donation banner so it also responds to ancestor-provided dark themes, improving contrast, background, and footer hook visuals.
  • Refined dark-mode badge styling to standardize dark-theme badge borders and colors (notably adjusted everyday badge border), ensuring consistent badge readability and visual coherence.

[vercel]

@Prashant1git is attempting to deploy a commit to the openfoodfacts Team on Vercel.

A member of the Team first needs to authorize it.

[VaiTon]

What is stellar dark mode? Also, we don't have a host .dark class as far as I know.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f0eee4ba-759f-4871-91f5-703f1f307d62

📥 Commits

Reviewing files that changed from the base of the PR and between f5e441c and d786bba.

📒 Files selected for processing (1)

• web-components/src/components/mobile-badges/mobile-badges.ts

✅ Files skipped from review due to trivial changes (1)

• web-components/src/components/mobile-badges/mobile-badges.ts

---

📝 Walkthrough

Walkthrough

Added ancestor-based dark-mode CSS (:host-context(.dark)) to the donation banner component; adjusted mobile badge dark-mode CSS selectors and a dark-mode border color. Changes are styling-only; no JS, rendering, or public API changes.

Changes

Cohort / File(s)	Summary
Donation banner web-components/src/components/donation-banner/donation-banner.ts	Added :host-context(.dark) selectors alongside existing .dark-mode rules for container, footer, title, main-div wrapper, and hook section to apply dark-mode when an ancestor has .dark. No logic changes.
Mobile badges web-components/src/components/mobile-badges/mobile-badges.ts	Refined dark-mode badge rules: removed base .everyday/.foods overrides and kept .dark-mode .everyday / .dark-mode .foods; adjusted .everyday dark-mode border color (#0050a0 → #0050a8). Whitespace/comments adjusted. Styles-only changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through styles beneath a sable sky,
Found a quiet class where darker shadows lie,
Banners now listen to ancestors’ night,
Badges brushed new borders in the pale moonlight,
A tiny tweak — the UI sleeps tight.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 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 main changes: adding dark mode support via :host-context(.dark) to both mobile badges and donation banner components, making the PR's intent clear.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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]

🧹 Nitpick comments (1)

web-components/src/components/mobile-badges/mobile-badges.ts (1)

34-36: Remove duplicated :host rule.

Line 34–36 duplicates the exact block already defined at Line 31–33.

Suggested cleanup

       :host {
         display: block;
       }
-      :host {
-        display: block;
-      }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@web-components/src/components/mobile-badges/mobile-badges.ts` around lines 34
- 36, Remove the duplicated :host CSS rule in the mobile-badges component:
locate the two identical ":host { display: block; }" blocks in mobile-badges.ts
(the :host rule around lines ~31–36) and delete the redundant one so only a
single :host { display: block; } remains; if any other styles were meant to be
different, consolidate them into the remaining :host block instead of
duplicating.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@web-components/src/components/mobile-badges/mobile-badges.ts`:
- Around line 34-36: Remove the duplicated :host CSS rule in the mobile-badges
component: locate the two identical ":host { display: block; }" blocks in
mobile-badges.ts (the :host rule around lines ~31–36) and delete the redundant
one so only a single :host { display: block; } remains; if any other styles were
meant to be different, consolidate them into the remaining :host block instead
of duplicating.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5d2368d4-41ac-43c0-8cb9-3943b71a4a09

📥 Commits

Reviewing files that changed from the base of the PR and between f640e8a and c0ad212.

📒 Files selected for processing (2)

• web-components/src/components/donation-banner/donation-banner.ts
• web-components/src/components/mobile-badges/mobile-badges.ts

[VaiTon]

What is stellar dark mode? Also, we don't have a host .dark class as far as I know.

@Prashant1git can you please answer?

[Prashant1git]

What is stellar dark mode? Also, we don't have a host .dark class as far as I know.

@Prashant1git can you please answer?

What is stellar dark mode? Also, we don't have a host .dark class as far as I know.

@Prashant1git can you please answer?

What is stellar dark mode? Also, we don't have a host .dark class as far as I know.

quick update @VaiTon! looked deeper into the code and realized the web components have an internal "darkModeListener "that automatically applies a .dark-mode class to the wrapper when dark mode is active. so I completely removed :host-context(.dark) selectors, the code is much cleaner you don't need to worry about looking up the host class anymore!