Minor improvements to theme selector

[antonymilne]

Change 1: theme switcher toggle meaning

Currently our theme switcher operates like this:

• toggled to left = dark theme
• toggled to right = light theme

We should change it to this:

• toggled to left = whatever the dashboard creator set as default theme (which is dark by default, but they can override this with Dashboard.theme)
• toggled to right = the non-default them

@huong-li-nguyen said:

If we implement the suggested change, we'll likely need to adjust our CSS as well. Dan has created different toggle designs for the dark and light themes, which get activated when the toggle is checked. If we change the meaning of "checked," we'll also need to rewrite the CSS accordingly. Currently, I am not sure how easy that is, because the CSS needs to differ on a light theme depending if the light theme was there as a default or if it got switched to it

@petar-qb:

If we decide to implement "default theme on the left side" change, then maybe we don't have to care about what is "checked", but just apply transform: rotateY(180deg); on the toggle button if default theme is "light" (and swap the Sun-Moon positions too).

Change 2: add sun/moon icons

@Joseph-Perkins said:

ultimately I think the theme switching toggle is pending a redesign, because it was chosen more for ease/speed of implementation at the time (ie. a pre-existing component), rather than having been fully designed
eventually it will probably be replaced by something more like a sun/moon based toggle, which makes it immediately understandable what the toggle settings relate to (and the relevant one will be selected by default) - plus it will also probably end up in a "settings" menu (which itself will probably be down at the bottom on the left)