add a border to ansipicker, and fix the corner radius

fix light themes having unreadable text
added a luminance property to calculate the brighness of the bg color
if its > 0.5, choose a light theme to get black text

ShhShell/ShhShellApp.swift

@@ -27,7 +27,7 @@ struct ShhShellApp: App {
 				hostsManager: hostsManager,
 				keyManager: keyManager
 			)
-			.colorScheme(.dark)
+			.colorScheme(hostsManager.selectedTheme.background.luminance > 0.5 ? .light : .dark)
 			.tint(hostsManager.selectedTheme.ansi[hostsManager.selectedAnsi].suiColor)
 		}
 	}

ShhShell/Themes/ColorCodable.swift

@@ -55,3 +55,12 @@ extension SwiftTerm.Color {
 		return UIColor(red: red, green: green, blue: blue, alpha: 1)
 	}
 }
+
+extension SwiftTerm.Color {
+	var luminance: Double {
+		let r = Double(red)/65535
+		let g = Double(green)/65535
+		let b = Double(blue)/65535
+		return (0.2126*r + 0.7152*g + 0.0722*b)
+	}
+}

ShhShell/Views/Themes/AnsiPickerView.swift

@@ -11,34 +11,36 @@ struct AnsiPickerView: View {
 	@ObservedObject var hostsManager: HostsManager
 	
 	var body: some View {
-		GeometryReader { geo in
-			VStack(spacing: 0) {
-				ForEach(0...1, id: \.self) { row in
-					HStack(spacing: 0) {
-						ForEach(1...8, id: \.self) { col in
-							let index = (col+(row*8))-1
-							var isSelected: Bool { hostsManager.selectedAnsi == index }
-							ZStack {
-								Rectangle()
-									.fill(hostsManager.selectedTheme.background.suiColor)
-								Rectangle()
-									.fill(hostsManager.selectedTheme.ansi[index].suiColor)
-									.padding(isSelected ? 5 : 0)
-									.clipShape(
-										RoundedRectangle(
-											cornerRadius: isSelected ? 10 : 0
-										)
-									)
-									.onTapGesture {
-										hostsManager.selectAnsi(index)
-									}
+		ZStack {
+			RoundedRectangle(cornerRadius: 15)
+				.aspectRatio(CGSize(width: 4, height: 1), contentMode: .fit)
+				.foregroundStyle(hostsManager.selectedTheme.foreground.suiColor.opacity(0.7))
+			GeometryReader { geo in
+				VStack(spacing: 0) {
+					ForEach(0...1, id: \.self) { row in
+						HStack(spacing: 0) {
+							ForEach(1...8, id: \.self) { col in
+								let index = (col+(row*8))-1
+								var isSelected: Bool { hostsManager.selectedAnsi == index }
+								ZStack {
+									Rectangle()
+										.fill(hostsManager.selectedTheme.background.suiColor)
+									RoundedRectangle(cornerRadius: isSelected ? 5 : 0)
+										.fill(hostsManager.selectedTheme.ansi[index].suiColor)
+										.padding(isSelected ? 5 : 0)
+										.onTapGesture {
+											hostsManager.selectAnsi(index)
+										}
+								}
 							}
 						}
 					}
 				}
 			}
+			.aspectRatio(CGSize(width: 4, height: 1), contentMode: .fit)
+			.clipShape(RoundedRectangle(cornerRadius: 10))
+			.padding(5)
 		}
-		.clipShape(RoundedRectangle(cornerRadius: 15))
 	}
 }
 

ShhShell/Views/Themes/ThemeManagerView.swift

@@ -51,6 +51,13 @@ struct ThemeManagerView: View {
 						}
 						.padding(.horizontal)
 						
+						HStack {
+							Text("Your Themes")
+								.padding(.top)
+								.padding(.horizontal)
+								.font(.headline)
+							Spacer()
+						}
 						if hostsManager.themes.isEmpty {
 							VStack(alignment: .leading) {
 								Image(systemName: "paintpalette")