DOP-5029: CTAs should initialize in dark mode preference

[mayaraman19]

Stories/Links:

DOP-5029

Updates Banner.js and CTABanner.js.

Current Behavior:

CTA Banner
App Services Deprecation

Staging Links:

CTA Banner
Test Banner Page
App Services Deprecation

Notes:

README updates

• • This PR introduces changes that should be reflected in the README, and I have made those updates.
• • This PR does not introduce changes that should be reflected in the README

[netlify]

✅ Deploy Preview for mongodb-snooty ready!

Name	Link
🔨 Latest commit	38ff579
🔍 Latest deploy log	https://app.netlify.com/sites/mongodb-snooty/deploys/66f6c2cd451f1900080c34c7
😎 Deploy Preview	https://deploy-preview-1251--mongodb-snooty.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mmeigs]

It really does look great. Okay, I know this is so annoying, but since we're doing this anyway - could you also do the :before: and the svg so that those colors don't flash in light mode too?
And there's one odd thing happening... in the first link, the "You are" initialize in dark blue... I'm somehow guessing it's because of the anchor tag, but I really am not sure!

[biancalaube]

Hey Maya, I noticed 3 small things in the that maybe could be fixed but Im not sure if they are blockers or not


1. CTA Banner : I noticed that the text “You can” on refresh goes from dark blue to the respective color for dark/light mode. I noticed it also flashes the dark blue in light mode.
2. I noticed for just regular banners ( Test Banner Page ) that the left handside background color still flashes light mode before going to dark mode.
3. On the App Services Deprecation page the size of the font changes on reload. I don’t really know if that needs to be a fix in this ticket but just something I thought would be good to point out.

Update: I noticed Matt also commented on the 1st point so you can ignore that one.

[mayaraman19]

@biancalaube the behavior seems to happen in preprd as well, so I'm going to file a ticket for this! edit: nvm seung just filed one

[biancalaube]

Thanks for doing that Maya, LGTM! :)

[mmeigs]

Oh so beautiful