I’m creating a basic app for meditation to continue learning SwiftUI. I am unsure how to get the Picker and Toggle views to have the same background as is being used within the Form, that is, not the .splashBackground but this line below:
.background(colorScheme == .dark ? Color.opacityDark : Color.white.opacity(0.7))
var body: some View {
ZStack {
Color.splashBackground
.ignoresSafeArea()
VStack {
Text("Meditation Settings")
.font(.title)
.fontWeight(.ultraLight)
.padding()
.background(Color.blue.opacity(0.2))
.cornerRadius(10)
Form {
Section {
Picker(selection: $meditationTime, label: Text("Meditation Time").font(.footnote)) {
ForEach(1..<181, id: .self) { minute in
Text("(minute) min").tag(minute)
.background(Color.splashBackground)
}
}
}
Section {
Toggle(isOn: $isCountdownEnabled) {
Text("Enable Countdown")
.font(.footnote)
}.tint(Color.themeAccent2)
if isCountdownEnabled {
Picker(selection: $countdownTime, label: Text("Countdown Time").font(.footnote)) {
ForEach(Array(stride(from: 5, through: 60, by: 5)), id: .self) { second in
Text("(second) sec").tag(second)
}
}
}
}
Section {
Toggle(isOn: $isBackgroundSoundEnabled) {
Text("Enable Background Sound")
.font(.footnote)
}.tint(Color.themeAccent2)
if isBackgroundSoundEnabled {
Picker("Background Sound", selection: $backgroundSound) {
ForEach(backgroundSounds, id: .self) { sound in
Text(sound).tag(sound)
}
}
}
}
Section {
Toggle(isOn: $isBellIntervalEnabled) {
Text("Enable Bell Interval")
.font(.footnote)
}.tint(Color.themeAccent2)
if isBellIntervalEnabled {
Picker(selection: $bellInterval, label: Text("Bell Interval").font(.footnote)) {
ForEach(bellIntervals, id: .self) { interval in
Text(interval).tag(interval)
.font(.footnote)
}
}
}
}
Section {
Toggle(isOn: $endingBell) {
Text("Enable Ending Bell")
.font(.footnote)
}.tint(Color.themeAccent2)
}
Section {
Button(action: startMeditation) {
Text("Start Meditation")
.foregroundStyle(Color.themeText)
.font(.subheadline)
.fontWeight(.semibold)
.italic()
.frame(maxWidth: .infinity, alignment: .center)
}
}
}
.scrollContentBackground(.hidden)
.background(colorScheme == .dark ? Color.opacityDark : Color.white.opacity(0.7))
.cornerRadius(10)
.shadow(radius: 10)
.padding()
}
}
}
I’ve tried tint, accent, background and so on but there doesnt appear to be a built in way to change the color of the picker/toggle view itself, which remains white.