# Chapter 3 Appearance Menu

**URL:** <https://forums.kodeco.com/t/chapter-3-appearance-menu/169289>\
**Category:** macOS by Tutorials\
**Created:** [April 18, 2022, 10:24pm UTC](https://forums.kodeco.com/t/chapter-3-appearance-menu/169289 "2022-04-18T22:24:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![createch](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/createch/32/109646_2.png) [@createch](https://forums.kodeco.com/u/createch)\
**Post date:** [April 18, 2022, 10:24pm UTC](https://forums.kodeco.com/t/chapter-3-appearance-menu/169289/1 "2022-04-18T22:24:52Z")

</div>

This is so much fun.  
I just thought that I would share my alternative to the PickerView and list of buttons for the Appearance menu.

I changed things up a bit for the Appearance menu to replace the Picker with a series of buttons. To get the keyboard shortcuts I added a computed property to the DisplayMode enum

```auto
    var shortCut: KeyEquivalent {
        switch self {
        case .light:
            return KeyEquivalent("L")
        case .dark:
            return KeyEquivalent("D")
        case .auto:
            return KeyEquivalent("Y")
        }
    }

```

I also removed the defined raw values from the enum as you can simply use  
`displayMode.rawValue.capitalized` when you need it to get that same string  
That then allows me to use a ForEach loop to display the buttons and then use an SFSymbol of a checkmark, or not depending on whether or not the iteration matches the appStorage version.

```auto
Menu("Appearance") {
    ForEach(DisplayMode.allCases, id: \.self) { mode in
        Button {
            displayMode = mode
        } label: {
            if mode == displayMode {
                Text("\(Image(systemName: "checkmark")) \(mode.rawValue.capitalized)")
            } else {
                Text(" \(mode.rawValue.capitalized)")
            }
        }
        .keyboardShortcut(mode.shortCut, modifiers: .command)
    }
}

```

---

<div class="post-metadata">

**Author:** ![sarah](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/sarah/32/111112_2.png) [@sarah](https://forums.kodeco.com/u/sarah)\
**Post date:** [April 18, 2022, 11:02pm UTC](https://forums.kodeco.com/t/chapter-3-appearance-menu/169289/2 "2022-04-18T23:02:38Z")

</div>

Thanks for sharing Stewart. This is an area where there are a lot of possibilities, and you’ve added more to the ones I suggested.