Skip to content

fix(misc): make webinar banner theme-aware with light mode support#35029

Merged
jaysoo merged 1 commit into
masterfrom
DOC-457
Mar 26, 2026
Merged

fix(misc): make webinar banner theme-aware with light mode support#35029
jaysoo merged 1 commit into
masterfrom
DOC-457

Conversation

@jaysoo
Copy link
Copy Markdown
Member

@jaysoo jaysoo commented Mar 26, 2026

Current Behavior

The webinar banner has a hardcoded dark background (bg-zinc-950) with white text in both light and dark mode. This makes the close button barely visible in light mode since Starlight's global styles override inherited text colors. The banner design also differs noticeably from the Framer marketing site, which uses a light background in light mode.

Expected Behavior

The banner adapts to the current theme:

  • Light mode: White background, subtle border, dark text, dark CTA button — matching the Framer marketing site design
  • Dark mode: Retains the existing dark background with white text and pink CTA button

All interactive elements (close button, CTA buttons) have proper contrast in both modes.

Dark:

image

Light:

image

Related Issue(s)

Fixes DOC-457

## Current Behavior
The webinar banner has a hardcoded dark background (`bg-zinc-950`) with
white text, making the close button barely visible in light mode since
Starlight's global styles can override inherited text colors.

## Expected Behavior
The banner adapts to the current theme: light mode shows a white
background with dark text and a dark CTA button (matching the Framer
marketing site), while dark mode retains the existing dark background
with white text and pink CTA.

## Related Issue(s)
Fixes DOC-457
@jaysoo jaysoo requested a review from a team as a code owner March 26, 2026 20:26
@jaysoo jaysoo requested a review from leosvelperez March 26, 2026 20:26
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 26, 2026

Deploy Preview for nx-docs ready!

Name Link
🔨 Latest commit 514567e
🔍 Latest deploy log https://app.netlify.com/projects/nx-docs/deploys/69c59692424baf00084fce0c
😎 Deploy Preview https://deploy-preview-35029--nx-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 26, 2026

Deploy Preview for nx-dev ready!

Name Link
🔨 Latest commit 514567e
🔍 Latest deploy log https://app.netlify.com/projects/nx-dev/deploys/69c5969275e81500082462f9
😎 Deploy Preview https://deploy-preview-35029--nx-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@nx-cloud
Copy link
Copy Markdown
Contributor

nx-cloud Bot commented Mar 26, 2026

View your CI Pipeline Execution ↗ for commit 514567e

Command Status Duration Result
nx affected --targets=lint,test,build,e2e,e2e-c... ✅ Succeeded 10m 12s View ↗
nx run-many -t check-imports check-lock-files c... ✅ Succeeded 7s View ↗
nx-cloud record -- pnpm nx conformance:check ✅ Succeeded 7s View ↗
nx build workspace-plugin ✅ Succeeded 1m 56s View ↗
nx-cloud record -- nx format:check ✅ Succeeded 1s View ↗
nx-cloud record -- nx sync:check ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-26 20:43:14 UTC

@jaysoo jaysoo merged commit dd376c2 into master Mar 26, 2026
25 checks passed
@jaysoo jaysoo deleted the DOC-457 branch March 26, 2026 20:51
FrozenPandaz pushed a commit that referenced this pull request Mar 26, 2026
…35029)

## Current Behavior

The webinar banner has a hardcoded dark background (`bg-zinc-950`) with
white text in both light and dark mode. This makes the close button
barely visible in light mode since Starlight's global styles override
inherited text colors. The banner design also differs noticeably from
the Framer marketing site, which uses a light background in light mode.

## Expected Behavior

The banner adapts to the current theme:
- **Light mode**: White background, subtle border, dark text, dark CTA
button — matching the Framer marketing site design
- **Dark mode**: Retains the existing dark background with white text
and pink CTA button

All interactive elements (close button, CTA buttons) have proper
contrast in both modes.

Dark:

<img width="759" height="499" alt="image"
src="https://github.com/user-attachments/assets/684113e8-cc48-43df-b17d-431ae8c864fc"
/>

Light:

<img width="635" height="318" alt="image"
src="https://github.com/user-attachments/assets/9ed514b7-dfe9-45c6-91d7-158434aa6cdc"
/>

## Related Issue(s)

Fixes DOC-457

(cherry picked from commit dd376c2)
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 1, 2026

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Apr 1, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants