WIP: Add dark mode support

[gary149]

This PR adds support for dark mode:

Please note:

• It uses the class strategy to manually toggle dark mode. It doesn't mean the default can't be prefers-color-scheme but this also lets the user toggle dark/default mode by himself (we did the same on the HF website).
• There is an issue with icons, we want to use currentColor but it might require inline svgs.
• We want different colors for dark mode in ui/packages/theme/src/colors.ts. It's not done by now.

Closes #741

[julien-c]

let's also use this as an opportunity to improve/speed up the way we pass the theme from hf.co, ok? cc @cbensimon

[cbensimon]

let's also use this as an opportunity to improve/speed up the way we pass the theme from hf.co, ok? cc @cbensimon

Yes, totally agree @julien-c

[cbensimon]

Context (for Spaces) :

We currently check if the __dark-theme URL query parameter is true to enable the darktheme for Gradio on Spaces.
We still need to support this (backward compatibility).

As @julien-c mentioned, in order to speed-up Space page loads,
we need to support reading a new __theme query parameter that can take three values : light, dark and system
If the value is system, we want to set the theme according to the system theme (prefers-color-scheme)

@pngwn what do you think of this ?

[pngwn]

@cbensimon Are those query params set depending on what is set in the hub? Would light/ dark ever be set if the hub doesn't have a toggle?

I think those three values would give us what we need on the gradio side to keep things in sync with the surrouding context.

Edit: I see the toggle is in settings. In that case, I think this makes sense to me and would allow us to keep everything nicely synced with the hub.

[pngwn]

I can add this logic to the PR here, falling back to system for non-space gradio apps. There will also be some work required on the hub, could that be ready for Gradio 3.0 release on wednesday?

[julien-c]

on the hub side i think it's just going to be a super super small PR. @cbensimon will link it to here when it's ready

[cbensimon]

@cbensimon Are those query params set depending on what is set in the hub? Would light/ dark ever be set if the hub doesn't have a toggle?

The __theme query parameter value will be the theme value from the hub (user theme setting or light by default if not logged-in).

The old (current) __dark-theme value is the theme "at runtime" (after DOM is loaded)

[cbensimon]

I can add this logic to the PR here, falling back to system for non-space gradio apps. There will also be some work required on the hub, could that be ready for Gradio 3.0 release on wednesday?

It's not a problem if it's not ready on hub-side for Wednesday as we're going to be backward compatible by still taking __dark-theme into account

[pngwn]

• resolve conflicts
• converted icons to components, used currentColor for strokes/fills, gave icons their own packages
• implemented dark mode switcher based on query params/ system settings (__theme query param -> __dark-mode query param -> system)
• various tweaks.

[abidlabs]

Tested with a bunch of blocks and interface demos. Really good stuff guys!