Swift Extension 1# 自定义主题颜色

1. 通过扩展Color，自定义想要的颜色

**

extension Color{

    static let xRed = Color.init(red: 226/255, green: 0/255, blue: 0/255)
    static let xRedLight = Color.init(red: 255/255, green: 246/255, blue: 246/255)
    static let xRedDark = Color.init(red: 150/255, green: 0/255, blue: 0/255)
    static let xRedBright = Color.init(red: 255/255, green: 10/255, blue: 10/255)
}

2. 在SwiftUI中使用自定义颜色

**

import SwiftUI

struct ThemeCard: View {
    var body: some View {
        VStack(alignment: .leading){
            Text("红色主题")
                .foregroundStyle(Color.xRedLight)
                .bold()
                .frame(alignment: .leading)
            ZStack{
                Image(.bk8)
                    .resizable()
                    .scaledToFill()

                HStack{
                    Spacer()
                    VStack(spacing: 0){
                        Rectangle().fill(Color.xRedLight)
                            .overlay {
                                Text("浅红").foregroundStyle(Color.xRedDark)
                            }
                        Rectangle().fill(Color.xRedBright)
                            .overlay {
                                Text("明亮 Red").foregroundStyle(Color.white)
                            }
                        Rectangle().fill(Color.xRed)
                            .overlay {
                                Text("红色").foregroundStyle(Color.white)
                            }
                        Rectangle().fill(Color.xRedDark)
                            .overlay {
                                Text("深红") .foregroundStyle(Color.white)
                            }
                    }.frame(width: maxWidth * 0.25)
                }
            }
        }
        .padding()
        .frame(width: maxWidth)
    }
}

3. 查看和调整效果

在界面上查看颜色实际效果。

image.png

如果不符合预期效果，直接修改对应颜色参数，直到满意的配色方案为止。