[Bug]: theme selection should be a dropdown/select rather than a toggle

[kgryte]

Description

The current theme selection UI does not accommodate future theme extensions, such as high contrast, in order to accommodate web accessibility needs.

Currently, the choice is binary, but we're likely to want at least three choices.

Related Issues

None.

Questions

No.

Demo

No response

Reproduction

-   open settings menu.

Expected Results

-   UI element which accommodates more than 2 options.

Actual Results

-    UI element which only accommodates 2 options.

Environments

Firefox, Chrome, Safari, Microsoft Edge, Internet Explorer, Other Browser

Browser Version

No response

Node.js / npm Version

No response

Platform

No response

Checklist

• [X] Read and understood the Code of Conduct.
• [X] Searched for existing issues and pull requests.

[Planeshifter]

While there could be other reasons to not use the MUI <ToggleButton />, the component does easily accommodate more than two options. See their documentation for various examples.

[kgryte]

IMO, a toggle button group is still the wrong abstraction here. Say we have 10 different themes; presenting what effectively amounts to a radio button UI pattern would be unorthodox, at best, and generally unexpected.

We're unlikely to have minimal button icons representing the themes, so cannot readily follow the examples in the docs for text justification. The most compact and expected UI pattern would be a dropdown.

[kgryte]

This has now been updated to a dropdown.