microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2025-12-10 00:27:05 -06:00
Code Issues Packages Projects Releases 177 Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Copilot 2025-06-15 23:27:27 -07:00 committed by GitHub
parent 5d83e82b2d
commit 5a501dcde9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
extensions/github-authentication/media/auth.css
View File

@ -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;
}

2
extensions/github-authentication/media/index.html
View File

@ -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: