@GuideBook(title: "My App-Wide Settings App", icon: title.png, background: titleBackground.png, firstFile: MyApp.swift) {
    @WelcomeMessage(title: "Welcome to My App-Wide Settings App!") {
        In this app we're going to explore a solution for creating a settings screen that lets a person change the background and foreground colors across the app.
        
        There are many ways to accomplish this, but we're going to look at one option.
    }
    
    @Guide {
        @Step(title: "The Problem: App-Wide Colors") {
            @ContentAndMedia {
                ![](AppWideSettings.001.png)
                
                The Problem: I want my colors picked on the SettingsView to be reflected in my app as background and foreground colors

                It depends where you need to use your colors, but this is probably a job for @Binding.
                You need to have one spot in your app to own the colors and pass them down to all the other views that need to use them.                
            }
            @TaskGroup(title: "Solution 1") {
                ![](AppWideSettings.002.png)
                
                If we figure out what view is our 'top' view, through which people interact with our app, we could store the background and foreground colors in this view as `@State`.
                
                @Task(type: walkthrough, id: "0.start", title: "The Beginning", file: ContentView.swift) {
                    @Page(id: "0.intro", title: "") {
                        `ContentView` is the entry point for our app, so we add the two properties here as  `@State`.
                        
                    }
                    @Page(id: "0.nav", title: "") {
                        Because it is the 'top' view, we add a `NavigationStack` surrounding all of its contents.
                        
                        This will make navigation links work and give us lots of natural behavior for an iOS app for free.
                    }
                    @Page(id: "0.settinglink", title: "") {
                        And here we have our link off to the settings screen. We've wrapped it in a `NavigationLink` so people will be able to get back to this same screen easily.
                        
                        You'll note that we pass our foreground and background colors with a `$` in front of them, which means we're ackowledging that the next screen might change the value of these colors. 
                    }
                    @Page(id: "0.nextlink", title: "") {
                        We also pass these same colors down to the NextView, but we don't expect them to change, so we haven't used a `$` here. We'll take a look at this file after we examine HOW we're going to change the colors, first.  
                    }
                }
                @Task(type: walkthrough, id: "0.settings", title: "Settings", file: SettingsView.swift) {
                    @Page(id: "0.bindings", title: "") {
                        The big difference between this view and the previous is the `@Binding` in front of our variable.
                        
                        We're really just going to pass it on to the `ColorPicker`s, but SwiftUI will make sure it changes all the way up and down our chain (`ContentView` -> `SettingsView` -> `ColorPicker`).
                    }
                    @Page(id: "0.preview", title: "") {
                        When you build this view, you're likely going to get an error from Playgrounds about the `Preview`. Because we added two properties to our View, for Preview to work correctly we need to pass in values to check out.
                        
                        When we have properties that are bindings we need to use this special wrapper called `.constant()` to pass in values that SwiftUI can use to display our view. We only really use this tool in previews.
                    }
                }
                @Task(type: walkthrough, id: "0.nextview", title: "The Next View", file: NextView.swift) {
                    ![](AppWideSettings.002.png)

                    @Page(id: "0.vars", title: "") {
                        The big difference between this view and the previous and the one before that is that we just have `var` in front of our variable. (Side note, we could have also used `let`, since we don't expect these to change in this view.)
                        
                        As we saw in the first step, when we call `NextView` in our `ContentView` we use the `foregroundColor:` and `backgroundColor:` parameters to pass in our app-wide colors.
                    }
                    @Page(id: "0.nextpreview", title: "") {
                        And the same as our `SettingsView`, to make our preview work right, we need to pass in colors to test out in the preview.
                    
                        Again, no need for a `.constant()` or anything like that, since they're not `@Binding`s or `@State`.
                    }
                }
            }
        }
    }
}
