Using TimelineView to use in a custom view modifier

Question

I am looking to use the Timelineview to automatically update the background colour for a popup sheet that is displaying a list.

I am trying to figure out how to only call it once so I can use it for multiple sections in one list and in different views that display the type of data but with different information.

I have custom colours that I would like to use and call them from the assets catalogue.

A Sample Code:

 List {
        
        Section(header: Text("Ear")
            .modifier(SectionHeaderModifer())) {

            ForEach(Ear.indices, id: \.self) {index in
                
                VStack {
                    VStack() {
                        Spacer()
                         Text(Ear[index].name)
                            .modifier(NameModifier())
                    }
                    HStack {
                        Text(String(format: "$%.2f", Ear[index].value))
                            .modifier(ValueModifier())
                
                       Text(Ear[index].code)
                            .modifier(CodeModifier())
                    }
                    .frame(width:270)
                }
                
                .modifier(RowFormatModifier())
                
                .listRowBackground(Color("\(hour)").opacity(0.9))
                .listRowSeparator(.hidden)
            } 
        } 

 Section(header: Text("Nose")
            .font(.title)
            .fontWeight(.thin)) {
                
                ForEach(Nose.indices, id: \.self) {index in
                    
                    VStack {
                        VStack() {
                            Spacer()
                             Text(Nose[index].name)
                                .modifier(NameModifier())
                        }
                        HStack {
                            Text(String(format: "$%.2f", Nose[index].value))
                                .modifier(ValueModifier())
                    
                           Text(Nose[index].code)
                                .modifier(CodeModifier())
                        }
                        .frame(width:270)
                    }
                    
                    .frame(width: 330, height:95, alignment: .center)
                    
                    .modifier(RowFormatModifier())
                    
                    .listRowBackground(Color("18").opacity(0.9))
                    .listRowSeparator(.hidden)
                    
                    }
                }

The second section is using the Color("18") which is in reference to 1800 just for reference as well. I have custom colour for each hour and thus why I am using the Timeline view to update the variable

The hour variable would be updated by the Timelineview as:

     TimelineView(.animation) {context in
        let now = Date()
        let hour = Calendar.current.component(.hour, from: now)

    }

I am not sure and I have tried and failed to try to put this in a ViewModifier where I could update the list row colour.

struct ChangeRowColor: ViewModifier {

func body(content: Content) -> some View {
    content

    TimelineView(.animation) {context in
        let now = Date()
        let hour = Calendar.current.component(.hour, from: now)

    }
    .listRowBackground(Color("\(hour)").opacity(0.9))
}

I know this is wrong because it can't see the hour variable.

Any suggestions? Where should I call the timeline to determine the hour? I only want to do it once and pass this into the different sections and other views that are of similar format.

Thanks!