Avoid duplicate dark-mode CSS imports on WNP

[Ayushsunny]

One-line summary

Avoid redundant dark-mode imports on What's New Page (WNP)

• I used an AI to write some of this code.

Significant changes and points to review

• Removed the redundant @import 'includes/dark-mode'; from _mofo-donate-cta.scss.
• Dark mode is now explicitly imported in whatsnew-135beta.scss.
• No functionality has been impacted, but testing is critical to confirm no regressions.

Issue / Bugzilla link

Fixes: #15772

Testing

[Ayushsunny]

Hi @alexgibson, could you kindly review this PR when you have a moment? Please let me know if there are any changes or improvements needed.

[janbrasna]

This regresses for prefers-color-scheme: dark consumers:

Screen.Recording.2025-01-14.at.15.29.21.mov

[janbrasna]

There is some implicit dependence on this import, so just removing this without other fixes breaks many pages when displayed on dark-mode OS/UA settings, esp. without dark mode import:

http://localhost:8000/en-US/firefox/133.0/whatsnew/?v=1

Also light pages including this will regress on dark systems to inverting the CTA to white to be invisible:

http://localhost:8000/en-US/firefox/132.0/whatsnew/

[Ayushsunny]

Thank you for the detailed feedback! I understand the regression caused by removing the dark-mode import. Would restoring dark mode specifically for components like the CTA button and other affected elements work as a solution? If so, could you guide me on identifying the specific file(s) or components that depend on the dark-mode styles? I’d like to ensure that those dependencies are addressed without introducing duplicate imports. Appreciate your help and insights!

[janbrasna]

I think there are at least two feasible ways, and perhaps a decision or two to be made about the actual outputs expected after the change — so I've outlined that in #15772 (comment) to get some more feedback about keeping the existing behavior with proper imports, or skipping it where not explicit but fixing up the partial mismatches.

[Ayushsunny]

Thank you for the detailed feedback! Based on your suggestions, I’d like to clarify:

• Should pages like http://localhost:8000/en-CA/firefox/132.0/whatsnew/ continue to support dark mode explicitly?
• Should pages like http://localhost:8000/en-US/firefox/134.0/whatsnew/ remain light-only, as originally designed?

Once these decisions are confirmed, I can proceed with implementing the suggested fixes.

Also: which option would be better to implement

Option 1: Merging _mofo-donate-cta.scss into _dark-mode.scss.
This will ensure consistency but might slightly bloat dark-mode styles.

Option 2: Renaming _mofo-donate-cta.scss to _dark-mode-mofo-donate-cta.scss.
This will make the dependency explicit and ensures dark mode is only included where needed.