SwiftUI - Создание кнопки, подходящей для светлого и темного режима

HStack(spacing: 15) {
        ForEach(0..<button.count, id: \.self) {button in
                Button(action: {
                    self.buttonContinue = button
                    
                }) {
                    Text("\(self.button[button])").padding(.vertical, 12.5)
                        .padding(.horizontal, 120)
                        .foregroundColor(.white)
                        .background(self.buttonContinue == button ? Color.black: Color.gray)
                    .clipShape(Capsule())}}

        }

Я использовал этот код для создания кнопки «Продолжить». В светлом режиме цвета работают хорошо (от серого фона и белого текста до черного фона и белого текста), однако, когда я переключаюсь в темный режим, фон кнопки исчезает с серого до нуля при нажатии. Могу ли я в любом случае изменить фон кнопки на белый в темном режиме (например, когда я пытался, я мог изменить только цвет текста)?

SwiftUI Color не реагирует на Dark Mode. Вместо этого используйте UIColor для iOS или NSColor для macOS.

— 21.03.2022 20:58

Создайте свой собственный «Набор цветов» в «Активах», вы можете установить там различные режимы и повторно использовать цвет во всем приложении, пропуская дополнительный код.

— 21.03.2022 21:09

button swiftui

21.03.2022 20:52

5 дизайнов темных кнопок с использованием HTML и CSS

Здесь представлены пять дизайнов темных кнопок с кодом с использованием HTML и CSS:

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В вашем случае вы можете просто сделать:

                Text("Button \(button)")
                    .padding(.vertical, 12.5)
                    .padding(.horizontal, 120)
                    .foregroundStyle(.background)
                    .background(2 == button ? Color.primary: Color.secondary)
                    .clipShape(Capsule())

или для большего контроля:

@Environment(\.colorScheme) var colorScheme

var textColor: Color {
    if colorScheme == .dark {
        return Color.white
    } else {
        return Color.black
    }
}

или подпишитесь на @loremipsum и определите свои собственные цвета в Assets

21.03.2022 21:13

Вы можете использовать либо UIColor в Color(uiColor:) init, либо создать свой собственный цветовой актив, который имеет любой внешний вид (светлый) и цвет темного режима. Использование UIColor ниже:

Text("\(self.button[button])").padding(.vertical, 12.5)
    .padding(.horizontal, 120)
    .foregroundColor(.white)
    // See below for the appropriate inits:              
    .background(self.buttonContinue == button ? Color(uiColor: .labelColor): Color(uiColor: .systemGrayColor)
    .clipShape(Capsule())}}

Или с помощью цветного актива: