Skip to content

Commit 5b4b174

Browse files
authoredFeb 27, 2025··
chore: improve text contrast on light mode (#80)
I discovered you pretty much never want to use `gray` as a text colour. `secondary` is only gray where appropriate. The menu bar tray is slightly transparent, and `.secondary` and `.primary` text colours account for that. As seen below, dark mode is almost unchanged. ## Light Mode ### Before (on a dark background) ![image](https://github.com/user-attachments/assets/c820ae9b-7bfb-4caa-bf46-a3e88c8774ff) ![image](https://github.com/user-attachments/assets/77d06c06-28d5-43ad-85bc-c7ece2ed77cc) ### After (on a dark background) ![image](https://github.com/user-attachments/assets/d4e1ca40-1bc4-4624-800a-97c772fa4b2d) ![image](https://github.com/user-attachments/assets/e496d22b-40bb-4734-a761-842b779a430c) Note: Apple's decided to make `secondary` darker than `primary` in this case. ### After (on a light background) ![image](https://github.com/user-attachments/assets/d7b0401f-871d-4357-b994-b0b8445a3897) ![image](https://github.com/user-attachments/assets/475bf25f-e4c4-41b7-82ec-78aca90c51ea) ## Dark Mode ### Before ![image](https://github.com/user-attachments/assets/c8b6b6db-abf0-44e0-8882-0c4d81330977) ![image](https://github.com/user-attachments/assets/e0c06b80-eefe-41be-84a4-902a65124807) ### After ![image](https://github.com/user-attachments/assets/2e00bb6d-f4f5-472e-b1dd-7f8f37622500) ![image](https://github.com/user-attachments/assets/e2055106-2c29-475b-b342-bdbf88af3194)
1 parent 2e762ea commit 5b4b174

File tree

5 files changed

+8
-8
lines changed

5 files changed

+8
-8
lines changed
 

‎Coder Desktop/Coder Desktop/VPNMenuState.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ enum AgentStatus: Int, Equatable, Comparable {
3333
case .okay: .green
3434
case .warn: .yellow
3535
case .error: .red
36-
case .off: .gray
36+
case .off: .secondary
3737
}
3838
}
3939

‎Coder Desktop/Coder Desktop/Views/Agents.swift

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ struct Agents<VPN: VPNService>: View {
2121
if items.count == 0 {
2222
Text("No workspaces!")
2323
.font(.body)
24-
.foregroundColor(.gray)
24+
.foregroundColor(.secondary)
2525
.padding(.horizontal, Theme.Size.trayInset)
2626
.padding(.top, 2)
2727
}
@@ -30,7 +30,7 @@ struct Agents<VPN: VPNService>: View {
3030
Toggle(isOn: $viewAll) {
3131
Text(viewAll ? "Show less" : "Show all")
3232
.font(.headline)
33-
.foregroundColor(.gray)
33+
.foregroundColor(.secondary)
3434
.padding(.horizontal, Theme.Size.trayInset)
3535
.padding(.top, 2)
3636
}.toggleStyle(.button).buttonStyle(.plain)

‎Coder Desktop/Coder Desktop/Views/VPNMenu.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ struct VPNMenu<VPN: VPNService>: View {
3030
Divider()
3131
Text("Workspaces")
3232
.font(.headline)
33-
.foregroundColor(.gray)
33+
.foregroundColor(.secondary)
3434
VPNState<VPN>()
3535
}.padding([.horizontal, .top], Theme.Size.trayInset)
3636
Agents<VPN>()

‎Coder Desktop/Coder Desktop/Views/VPNMenuItem.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ struct MenuItemView: View {
5656
var formattedName = AttributedString(name)
5757
formattedName.foregroundColor = .primary
5858
if let range = formattedName.range(of: ".coder") {
59-
formattedName[range].foregroundColor = .gray
59+
formattedName[range].foregroundColor = .secondary
6060
}
6161
return formattedName
6262
}

‎Coder Desktop/Coder Desktop/Views/VPNState.swift

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ struct VPNState<VPN: VPNService>: View {
1212
case (.failed(.systemExtensionError(.needsUserApproval)), _):
1313
Text("Awaiting System Extension approval")
1414
.font(.body)
15-
.foregroundStyle(.gray)
15+
.foregroundStyle(.secondary)
1616
case (_, false):
1717
Text("Sign in to use CoderVPN")
1818
.font(.body)
19-
.foregroundColor(.gray)
19+
.foregroundColor(.secondary)
2020
case (.disabled, _):
2121
Text("Enable CoderVPN to see workspaces")
2222
.font(.body)
23-
.foregroundStyle(.gray)
23+
.foregroundStyle(.secondary)
2424
case (.connecting, _), (.disconnecting, _):
2525
HStack {
2626
Spacer()

0 commit comments

Comments
 (0)
Please sign in to comment.