Skip to content

Add light mode support to GitHub authentication sign-in page #251509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 16, 2025

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jun 15, 2025

This PR adds light mode support to the GitHub authentication sign-in page based on the user's browser preference, using CSS media queries.

Changes Made

  • Added @media (prefers-color-scheme: light) media query to extensions/github-authentication/media/auth.css
  • Defined light mode color scheme with appropriate contrast:
    • Background: #ffffff (white)
    • Text: #1e1e1e (dark gray)
    • Branding: #1e1e1e (dark gray for visibility)
    • Error text: #d73a4a (GitHub standard error red)

Implementation Details

  • Pure CSS solution: No JavaScript or HTML modifications required
  • Browser-driven: Respects user's system color scheme preference automatically
  • Backward compatible: All existing dark mode styles preserved unchanged
  • Minimal footprint: Only 16 lines of CSS added, 0 lines deleted

Browser Support

The prefers-color-scheme media query is supported by all modern browsers and gracefully falls back to the existing dark mode in older browsers that don't support it.

Before/After

Dark mode (default): Dark background (#2C2C32) with white text
Light mode (new): White background with dark text, automatically applied when user has light mode preference

Fixes #251508.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Add light mode to sign in page in only CSS based on the user's browser preference Add light mode support to GitHub authentication sign-in page Jun 15, 2025
@Copilot Copilot AI requested a review from TylerLeonhardt June 15, 2025 00:54
Copilot finished work on behalf of TylerLeonhardt June 15, 2025 00:55
@TylerLeonhardt TylerLeonhardt marked this pull request as ready for review June 16, 2025 06:04
@TylerLeonhardt TylerLeonhardt enabled auto-merge (squash) June 16, 2025 06:04
@vs-code-engineering vs-code-engineering bot added this to the June 2025 milestone Jun 16, 2025
@TylerLeonhardt TylerLeonhardt merged commit 5a501dc into main Jun 16, 2025
8 checks passed
@TylerLeonhardt TylerLeonhardt deleted the copilot/fix-251508 branch June 16, 2025 06:27
Subham-KRLX pushed a commit to Subham-KRLX/vscode that referenced this pull request Jun 17, 2025
…ft#251509)

* Initial plan for issue

* Add light mode support to GitHub auth page using CSS media queries

Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>

* use vscode colors

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: TylerLeonhardt <2644648+TylerLeonhardt@users.noreply.github.com>
Co-authored-by: Tyler Leonhardt <tyleonha@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Error loading sessions

Retrying...

Successfully merging this pull request may close these issues.

Add light mode to sign in page in only CSS based on the user's browser preference
3 participants