Smooth appearance switching

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