New color mode system for the beta documentation

[amitojsingh366]

Below mentioned things are added in this pr:

• persistent color mode (dark, light)
• components using the new color mode system
• code block/code editors now capable of dark mode

this was achieved by creating a context provider using the context api called ThemeProvider it can be found at src/modules/ThemeProvider.tsx

below is a short preview that showcases things added in this pr
https://i.imgur.com/oXRQvzU.mp4

[amitojsingh366]

@rachelnabors would love to hear your thoughts on this

[bogdansoare]

Instead of developing a custom solution, I would suggest using https://github.com/pacocoursey/next-themes

[amitojsingh366]

Instead of developing a custom solution, I would suggest using https://github.com/pacocoursey/next-themes

i don't think that is a good idea since the new website uses tailwindcss

[bogdansoare]

next-themes works with any styling solution, they even have an example for tailwind https://github.com/pacocoursey/next-themes/tree/master/examples/tailwind

[amitojsingh366]

@rachelnabors I think i could do this with the context API if you would prefer this being done without an external dependency

[amitojsingh366]

actually i am gonna remove this dependency just in case

[amitojsingh366]

@rachelnabors @gaearon could you please have a look at this?

[gaearon]

Sorry, this got auto-closed when I reshuffled the branches. Please feel free to resubmit the changes against the beta/ folder on the main branch.

We've already started the relevant work in #4019 about a week ago (unfortunately I've just found time to move the code). How does your PR compare to that? Do you have a list of things that it does so that we can compare them one by one?

Thanks!

[amitojsingh366]

Sorry, this got auto-closed when I reshuffled the branches. Please feel free to resubmit the changes against the beta/ folder on the main branch.

We've already started the relevant work in #4019 about a week ago (unfortunately I've just found time to move the code). How does your PR compare to that? Do you have a list of things that it does so that we can compare them one by one?

Thanks!

in my pr i also have the color mode persist and also added smooth transitions in between the color mode changes