Skip to content

Commit 632413f

Browse files
mjcheethammjcheetham
authored
Dark theme support for OAuth authentication response pages (#2325)
Adds `prefers-color-scheme: dark` media queries to the HTML pages shown after OAuth authentication so they respect the browser/system light/dark mode preference. - [x] Add dark-mode styles to default OAuth success/failure HTML pages in `OAuth2SystemWebBrowser.cs` - [x] Add dark-mode styles to GitHub success/failure HTML pages in `GitHubResources.resx` - [x] Add dark-mode styles to Bitbucket success/failure HTML pages in `BitbucketResources.resx` - [x] Add `<meta name="color-scheme" content="light dark">` so browser-painted UI follows the theme - [x] Build all affected projects — succeeded - [x] Run existing tests for affected projects — all pass - [x] Address PR review: override AUI's light `#f5f5f5` background on `#footer` / `#footer-logo` in Bitbucket dark-mode pages
2 parents ed13a29 + 50cdad4 commit 632413f

3 files changed

Lines changed: 54 additions & 3 deletions

File tree

‎src/shared/Atlassian.Bitbucket/BitbucketResources.resx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,20 @@
2222
<html lang="en">
2323
<head>
2424
<meta charset="utf-8">
25+
<meta name="color-scheme" content="light dark">
2526
<title>Bitbucket Authentication</title>
2627
<link rel="stylesheet" href="http://aui-cdn.atlassian.com/aui-adg/5.9.19/css/aui.min.css" media="all">
2728
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
2829
<script src="http://aui-cdn.atlassian.com/aui-adg/5.9.19/js/aui.min.js"></script>
30+
<style>
31+
@media (prefers-color-scheme: dark) {
32+
html, body, body.aui-page-notification { background: #0D1117 !important; color: #C9D1D9 !important; }
33+
.aui-page-panel, .aui-page-panel-inner, .aui-page-panel-content { background: #161B22 !important; color: #C9D1D9 !important; border-color: #30363D !important; }
34+
h1, h2, h3, h4, h5, h6, p { color: #C9D1D9 !important; }
35+
a { color: #58A6FF !important; }
36+
#footer, #footer-logo { background: #0D1117 !important; color: #C9D1D9 !important; }
37+
}
38+
</style>
2939
</head>
3040
<body class="aui-page-notification aui-page-size-large">
3141
<div id="page" style="text-align: center;">
@@ -53,11 +63,20 @@
5363
<html lang="en">
5464
<head>
5565
<meta charset="utf-8">
66+
<meta name="color-scheme" content="light dark">
5667
<title>Bitbucket Authentication</title>
5768
<link rel="stylesheet" href="http://aui-cdn.atlassian.com/aui-adg/5.9.19/css/aui.min.css" media="all">
5869
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
5970
<script src="http://aui-cdn.atlassian.com/aui-adg/5.9.19/js/aui.min.js"></script>
60-
<style>dt {{ font-weight: bold; margin-top: 15px }} dd {{ margin-left: 0; }}</style>
71+
<style>dt {{ font-weight: bold; margin-top: 15px }} dd {{ margin-left: 0; }}
72+
@media (prefers-color-scheme: dark) {{
73+
html, body, body.aui-page-notification {{ background: #0D1117 !important; color: #C9D1D9 !important; }}
74+
.aui-page-panel, .aui-page-panel-inner, .aui-page-panel-content {{ background: #161B22 !important; color: #C9D1D9 !important; border-color: #30363D !important; }}
75+
h1, h2, h3, h4, h5, h6, p, dt, dd {{ color: #C9D1D9 !important; }}
76+
a {{ color: #58A6FF !important; }}
77+
#footer, #footer-logo {{ background: #0D1117 !important; color: #C9D1D9 !important; }}
78+
}}
79+
</style>
6180
</head>
6281
<body class="aui-page-notification aui-page-size-large">
6382
<div id="page" style="text-align: center;">

‎src/shared/Core/Authentication/OAuth/OAuth2SystemWebBrowser.cs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@ namespace GitCredentialManager.Authentication.OAuth
1010
public class OAuth2WebBrowserOptions
1111
{
1212
internal const string DefaultSuccessHtml = @"<!DOCTYPE html><html><head>
13-
<style>body{font-family:sans-serif;}dt{font-weight:bold;}dd{margin-bottom:10px;}</style>
13+
<meta name=""color-scheme"" content=""light dark"">
14+
<style>body{font-family:sans-serif;}dt{font-weight:bold;}dd{margin-bottom:10px;}
15+
@media (prefers-color-scheme: dark){body{background:#0d1117;color:#c9d1d9;}a{color:#58a6ff;}}</style>
1416
<title>Authentication successful</title></head>
1517
<body><h1>Authentication successful</h1><p>You can now close this page.</p></body>
1618
</html>";
1719
internal const string DefaultFailureHtmlFormat = @"<!DOCTYPE html><html><head>
18-
<style>body{{font-family:sans-serif;}}dt{{font-weight:bold;}}dd{{margin-bottom:10px;}}</style>
20+
<meta name=""color-scheme"" content=""light dark"">
21+
<style>body{{font-family:sans-serif;}}dt{{font-weight:bold;}}dd{{margin-bottom:10px;}}
22+
@media (prefers-color-scheme: dark){{body{{background:#0d1117;color:#c9d1d9;}}a{{color:#58a6ff;}}}}</style>
1923
<title>Authentication failed</title></head>
2024
<body><h1>Authentication failed</h1><dl>
2125
<dt>Error:</dt><dd>{0}</dd>

‎src/shared/GitHub/GitHubResources.resx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
</resheader>
2121
<data name="AuthenticationResponseSuccessHtml" xml:space="preserve"><![CDATA[<!DOCTYPE html><html><head>
2222
<meta charset="utf-8">
23+
<meta name="color-scheme" content="light dark">
2324
<title>Git Credential Manager - Authentication Succeeded</title>
2425
<style type="text/css">
2526
body {
@@ -44,6 +45,9 @@ p {
4445
justify-content: center;
4546
align-items: center;
4647
}
48+
.icons svg {
49+
fill: currentColor;
50+
}
4751
.icons .plus {
4852
margin: 0 10px;
4953
font-size: 24px;
@@ -60,6 +64,16 @@ p {
6064
padding: 24px;
6165
margin: 28px;
6266
}
67+
@media (prefers-color-scheme: dark) {
68+
body {
69+
color: #C9D1D9;
70+
background: #0D1117;
71+
}
72+
.box {
73+
border-color: #30363D;
74+
background: #161B22;
75+
}
76+
}
6377
</style>
6478
</head><body>
6579
<div class="icons">
@@ -75,6 +89,7 @@ p {
7589

7690
<data name="AuthenticationResponseFailureHtmlFormat" xml:space="preserve"><![CDATA[<!DOCTYPE html><html><head>
7791
<meta charset="utf-8">
92+
<meta name="color-scheme" content="light dark">
7893
<title>Git Credential Manager - Authentication Failed</title>
7994
<style type="text/css">
8095
body {{
@@ -103,6 +118,9 @@ dd {{
103118
justify-content: center;
104119
align-items: center;
105120
}}
121+
.icons svg {{
122+
fill: currentColor;
123+
}}
106124
.icons .plus {{
107125
margin: 0 10px;
108126
font-size: 24px;
@@ -119,6 +137,16 @@ dd {{
119137
padding: 24px;
120138
margin: 28px;
121139
}}
140+
@media (prefers-color-scheme: dark) {{
141+
body {{
142+
color: #C9D1D9;
143+
background: #0D1117;
144+
}}
145+
.box {{
146+
border-color: #30363D;
147+
background: #161B22;
148+
}}
149+
}}
122150
</style>
123151
</head><body>
124152
<div class="icons">

0 commit comments

Comments
 (0)