Hello every developers. I need your help. Do you know how to attach animation to appearance, like a smooth transition from dark to light and vise versa. My code here:
@main
struct The_Library_of_BabelonApp: App {
@AppStorage("selectedAppearance") private var selectedAppearance = 0
@StateObject private var router = AppRouter()
var scheme: ColorScheme? {
if selectedAppearance == 1 { return .light }
if selectedAppearance == 2 { return .dark }
return nil
}
var body: some Scene {
WindowGroup {
RootView()
.preferredColorScheme(scheme)
.environmentObject(router)
// this is doesn't work correctly
.animation(.smooth(duration: 2), value: selectedAppearance)
}
}
}
And my appearance switching looks:
struct SettingsView: View {
@AppStorage("selectedAppearance") private var selectedAppearance = 0
var body: some View {
List {
Section(header: Text("Appearance")) {
HStack(spacing: 20) {
ThemePreview(title: "Light", imageName: "lightTheme", tag: 1, selection: $selectedAppearance)
ThemePreview(title: "Dark", imageName: "darkTheme", tag: 2, selection: $selectedAppearance)
ThemePreview(title: "System", imageName: "systemMode", tag: 0, selection: $selectedAppearance)
}
.padding(.vertical, 10)
.frame(maxWidth: .infinity)
}
}
}
}
struct ThemePreview: View {
let title: String
let imageName: String
let tag: Int
@Binding var selection: Int
var body: some View {
Button {
selection = tag
} label: {
VStack {
Image(imageName)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 120, height: 80)
.clipShape(RoundedRectangle(cornerRadius: 12))
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(selection == tag ? Color.blue : Color.clear, lineWidth: 3)
)
Text(title)
.font(.caption)
.foregroundColor(selection == tag ? .blue : .primary)
}
}
.buttonStyle(.plain)
}
}
I guess my code works but animation working another way, its turn my Section, I don't know.... Thank you in advance