Enhance the Dark Mode toggle to take into account device settings

[razwan]

Quoting @georgeolaru from an issue opened on Rosa2:

I think we should transform the "Dark Mode" functionality from the Customizer to an "Appearance" radio group with three options: Light (default), Dark, and Auto ( with the following description "Set light or dark mode automatically, according to the system-wide setting").

Regarding the switcher from the navigation, there are a few use cases, depending on the "Appearance" option:

1. When the "Appearance" option is set to "Light" or "Dark", the switcher will take those options as a default. When pressed it will change to the other one.
2. When the "Appearance" option is set to "Auto", the switcher will use the system option to reflect the current state (Dark or Light). When the user uses this switcher for the first time, it will override the "Auto" mode and the user will be able to manually commute between those two states.

I hope it makes more sense now.

---

As a side note, we could use the macOS setting as a reference (User Guide)

[georgeolaru]

@madalingorbanescu I have a few things that I noticed while testing. Have a look and let me know if you can replicate:

• [x] In the preview, the Light and Dark option refreshes and doesn't seem to work. Can we avoid the refresh? (see recording) cc @razwan
• [x] I cannot get to work the Auto option using the system options (see recording). 💡 For a great user experience, it would be awesome if we can live–synchronize the CSS properties with the system options and page refresh would not be needed.

And two things that we can improve:

• [x] The order should be Light, Dark, and then Auto.
• [x] As mentioned here, I think it would help the user to explain each one of those options, or at least the Auto, by adding the following description somewhere below the title:

  "Set light or dark mode automatically, according to the system-wide setting"