feat: improved color scheme for docs

[c-ehrlich]

Is your feature request related to a problem? Please describe.

The current docs are fine, but compared to our landing page or the docs of some other projects, they just don't look very good. Beyond (subjective) aesthetics, there are also usability/accessibility issues related to this.

The current color scheme mostly comes from the t3-purple color that we have defined in the Tailwind config. This has a few problems:

• We don't have a contrast color that would make it easier to draw attention to links and other UI elements
• Because we're mostly just using one hue, some parts of the UI are fairly low contrast, which can make it hard to read
• It looks ok but not great

Some references of docs that feel high quality to me:

• Astro Docs - I especially like these as they break out of the usual black/white/blue theme of most other docs
• React Beta Docs
• tRPC Docs

Describe the solution you'd like to see

Keep it T3 but improve readability and aesthetics

It would be nice if it keeps some kind of reference to purple as this has become part of the T3 "brand" but other than that open to anything.

I would love if the dark mode could be similar to our landing page. Maybe a similar gradient background but a bit more dimmed? Maybe the contrast colors come from the "full-stack, typesafe Next.js" text? But feel free to disregard all of this if you come up with something better that still feels T3.

If you propose something for both light and dark mode, they should feel like they belong together.

This is fundamentally about the color scheme, but if your changes need something else (for example different spacing) to look good, that's ok.

Describe alternate solutions

.

Additional information

Please don't put in a bunch of work making a PR, which may not end up getting merged. If you want to make a proposal, I would suggest one or two screenshots (can be based on real code changes or mocked) of your intended changes, that can be commented on by the community.

[gabrielelpidio]

I was playing around with the colors and like the following combination; if it's a path that you think might work, I can make a draft PR and continue with it.

Current:

Proposed:

Proposal 1:

[gabrielelpidio]

Proposal 2:

[ParasSolanki]

Also was thinking if we can remove transition from elements when we toggle mode from light to dark and vice versa.
Currently some elements change first and some after so imo its not looking good.
Maybe something like this?

demo-mode-toggling-video.mp4

I can make a PR if this is good

[c-ehrlich]

Also was thinking if we can remove transition from elements when we toggle mode from light to dark and vice versa. Currently some elements change first and some after so imo its not looking good. Maybe something like this?
demo-mode-toggling-video.mp4

I can make a PR if this is good

this might be an issue specific to your OS/browser/etc? here's now it looks for me

Screen.Recording.2022-12-04.at.15.17.31.mov

[ParasSolanki]

Also was thinking if we can remove transition from elements when we toggle mode from light to dark and vice versa. Currently some elements change first and some after so imo its not looking good. Maybe something like this?
demo-mode-toggling-video.mp4

I can make a PR if this is good

this might be an issue specific to your OS/browser/etc? here's now it looks for me

Screen.Recording.2022-12-04.at.15.17.31.mov

Yeah it could be

[arunavabasucom]

can i take this issue ??

[gabrielelpidio]

Moving around the accent color led to these. Unfortunately I wasn't able to keep the T3-purple like background due to it being too bright and any accent color on the pink/purple shade wouldn't look good

[c-ehrlich]

Thanks to everyone who has posted in here so far and sorry for the radio silence. We're currently evaluating whether we should stay on Astro for the site/docs or switch to a more batteries-included solution like Nextra or Docusaurus, so we've been hesitant to move forward on something like this that would likely be quite a bit of work. Will check back in here soon :)