diff --git a/extensions/github-authentication/media/auth.css b/extensions/github-authentication/media/auth.css
index 26093f8147a..6195171092c 100644
--- a/extensions/github-authentication/media/auth.css
+++ b/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;
 }
 
diff --git a/extensions/github-authentication/media/index.html b/extensions/github-authentication/media/index.html
index 2be3709ffc0..c63736a9108 100644
--- a/extensions/github-authentication/media/index.html
+++ b/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: