Add light mode support to GitHub authentication sign-in page (#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>

Author: Copilot

extensions/github-authentication/media/auth.css

@@ -3,6 +3,24 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+:root {
+	/* Dark theme colors (default) */
+	--vscode-foreground: #CCCCCC;
+	--vscode-editor-background: #1F1F1F;
+	--vscode-error-foreground: #F85149;
+	--vscode-textLink-foreground: #4daafc;
+}
+
+/* Light theme colors */
+@media (prefers-color-scheme: light) {
+	:root {
+		--vscode-foreground: #3B3B3B;
+		--vscode-editor-background: #FFFFFF;
+		--vscode-error-foreground: #F85149;
+		--vscode-textLink-foreground: #005FB8;
+	}
+}
+
 html {
 	height: 100%;
 }
@@ -14,9 +32,13 @@ body {
 	padding: 15px 30px;
 	display: flex;
 	flex-direction: column;
-	color: white;
+	color: var(--vscode-foreground);
 	font-family: "Segoe UI","Helvetica Neue","Helvetica",Arial,sans-serif;
-	background-color: #2C2C32;
+	background-color: var(--vscode-editor-background);
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
 }
 
 .branding {
@@ -28,7 +50,7 @@ body {
 	font-size: 20px;
 	letter-spacing: -0.04rem;
 	font-weight: 400;
-	color: white;
+	color: var(--vscode-foreground);
 	text-decoration: none;
 }
 
@@ -60,7 +82,7 @@ body.error .error-message {
 }
 
 .error-text {
-	color: red;
+	color: var(--vscode-error-foreground);
 	font-size: 1rem;
 }
 

extensions/github-authentication/media/index.html

@@ -15,7 +15,7 @@
 		<div class="message">
 			Sign-in successful! Returning to <span class="app-name"></span>...
 			<br><br>
-			If you're not redirected automatically, <a href="#" id="fallback-link" style="color: #85CEFF;">click here</a> or close this page.
+			If you're not redirected automatically, <a href="#" id="fallback-link">click here</a> or close this page.
 		</div>
 		<div class="error-message">
 			An error occurred while signing in: