Colors và Gradients

1. System Colors

Text("Red").foregroundColor(.red)
Text("Blue").foregroundColor(.blue)
Text("Green").foregroundColor(.green)
Text("Orange").foregroundColor(.orange)
Text("Purple").foregroundColor(.purple)
Text("Pink").foregroundColor(.pink)
Text("Yellow").foregroundColor(.yellow)
Text("Gray").foregroundColor(.gray)
Text("White").foregroundColor(.white)
Text("Black").foregroundColor(.black)

2. Semantic Colors

// Tự động adapt với Dark/Light mode
Text("Primary").foregroundColor(.primary)
Text("Secondary").foregroundColor(.secondary)

Rectangle().fill(.background)
Rectangle().fill(.accentColor)

3. Custom Colors

RGB

// RGB (0-1)
Color(red: 0.2, green: 0.5, blue: 0.8)

// RGB255 helper
extension Color {
    init(r: Int, g: Int, b: Int, opacity: Double = 1) {
        self.init(
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: opacity
        )
    }
}

Color(r: 52, g: 152, b: 219)  // Sử dụng

Hex Colors

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: .alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let r, g, b, a: UInt64
        switch hex.count {
        case 6: // RGB
            (r, g, b, a) = (int >> 16, int >> 8 & 0xFF, int & 0xFF, 255)
        case 8: // ARGB
            (r, g, b, a) = (int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF, int >> 24)
        default:
            (r, g, b, a) = (0, 0, 0, 255)
        }
        self.init(
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

Color(hex: "#3498db")
Color(hex: "E74C3C")

Asset Catalog

// Thêm color vào Assets.xcassets
Color("PrimaryBlue")
Color("BackgroundColor")

4. Opacity

Color.blue.opacity(0.5)
Text("Faded").foregroundColor(.black.opacity(0.6))

// Cũng có thể dùng
Color.blue.opacity(0.5)
// hoặc
.opacity(0.5)

5. Linear Gradient

// Hai màu
LinearGradient(
    colors: [.blue, .purple],
    startPoint: .leading,
    endPoint: .trailing
)

// Nhiều màu
LinearGradient(
    colors: [.red, .orange, .yellow],
    startPoint: .top,
    endPoint: .bottom
)

// Với stops
LinearGradient(
    stops: [
        .init(color: .blue, location: 0),
        .init(color: .white, location: 0.5),
        .init(color: .blue, location: 1)
    ],
    startPoint: .top,
    endPoint: .bottom
)

Các hướng

// Ngang
startPoint: .leading, endPoint: .trailing

// Dọc
startPoint: .top, endPoint: .bottom

// Chéo
startPoint: .topLeading, endPoint: .bottomTrailing
startPoint: .topTrailing, endPoint: .bottomLeading

6. Radial Gradient

RadialGradient(
    colors: [.white, .blue],
    center: .center,
    startRadius: 0,
    endRadius: 200
)

// Offset center
RadialGradient(
    colors: [.yellow, .orange, .red],
    center: .topLeading,
    startRadius: 0,
    endRadius: 400
)

7. Angular Gradient

// Rainbow
AngularGradient(
    colors: [.red, .orange, .yellow, .green, .blue, .purple, .red],
    center: .center
)

// Với angle
AngularGradient(
    colors: [.blue, .purple, .blue],
    center: .center,
    startAngle: .degrees(0),
    endAngle: .degrees(360)
)

8. Gradient Buttons

Button("Gradient Button") { }
    .font(.headline)
    .foregroundColor(.white)
    .padding()
    .frame(maxWidth: .infinity)
    .background(
        LinearGradient(
            colors: [.blue, .purple],
            startPoint: .leading,
            endPoint: .trailing
        )
    )
    .cornerRadius(12)

9. Gradient Text

Text("Gradient Text")
    .font(.largeTitle.bold())
    .foregroundStyle(
        LinearGradient(
            colors: [.blue, .purple, .pink],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

10. Color Scheme

struct AdaptiveView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Hello")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? .black : .white)
    }
}

// Force color scheme
ContentView()
    .preferredColorScheme(.dark)

11. Practical Examples

Card với Gradient

struct GradientCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Image(systemName: "star.fill")
                .font(.title)
                .foregroundColor(.white)

            Text("Premium")
                .font(.title2.bold())
                .foregroundColor(.white)

            Text("Unlock all features")
                .font(.subheadline)
                .foregroundColor(.white.opacity(0.8))
        }
        .padding(24)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(
            LinearGradient(
                colors: [
                    Color(hex: "#667eea"),
                    Color(hex: "#764ba2")
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .cornerRadius(20)
        .shadow(color: Color(hex: "#667eea").opacity(0.4), radius: 20, y: 10)
    }
}

---

📝 Tóm tắt

Gradient	Mô tả
LinearGradient	Gradient tuyến tính
RadialGradient	Gradient từ tâm
AngularGradient	Gradient xoay

Tips:

• Dùng semantic colors (.primary, .secondary) cho Dark Mode support
• Custom colors nên đặt trong Assets.xcassets
• Gradient stops cho phép kiểm soát chính xác vị trí màu