Implement site redesign with dark mode

[parlough]

Rewrites the site styles from scratch, to improve accessibility and add support for dark mode, while also dropping the dependencies on bootstrap and jquery. Various smaller PRs have already landed over the past few months to facilitate this change. It was intentional to avoid large changes to the site layout and structure as part of this work.

Staged: https://flutter-docs-prod--pr11172-feat-site-redesign-9gpoto1c.web.app/

New features:

• A toggleable dark (or device/auto) mode
• Collapsible left sidenav
• Dismissible top banner
• Simpler top navbar, with focus on search
• Much more space for content on narrow and mobile layouts
• More consistent and accessible HTML and styles
• Add external link icons to external sidenav entries
• Implement more dynamic design functionality with CSS instead of JS

Issues resolved:
Resolves #3632
Resolves #8030
Resolves #7769
Resolves #1667
Fixes #1728
Fixes #1940
Fixes #2313
Fixes #8505
Fixes #9000
Fixes #9329
Fixes #10532
Fixes #10536
Fixes #10543

Contributes to #9495
Contributes to #10534
Contributes to #10535

Left for follow-up:

• Active section highlighting for TOC
• Narrow version of TOC
• Search results without leaving page
• Updating or adding new images to work better in dark mode

[flutter-website-bot]

Visit the preview URL for this PR (updated for commit 916cd8a):

https://flutter-docs-prod--pr11172-feat-site-redesign-9gpoto1c.web.app

[domesticmouse]

Nitpick: Remove white on right side of "What's on this page" bar.

[sfshaza2]

Interesting! You can now close the banner. I like it.

• On the upgrade page. Please change the "master channel" text to "main channel". Funny how it's so hostile to me now and I never used to notice.
• Could you also incorporate Eric's sidenav changes, so we can look at all of it at once?
• Wow, the dark/light mode is so seamless and so beautiful!
• On this page ( https://flutter-docs-prod--pr11172-feat-site-redesign-pgdgowic.web.app/release/archive ), the tab defaulted to macOS - yay! Then I selected the other tabs and the "Windows" text never de-highlighted.

@parlough, this is, overall, looking and feeling fabulous. But I'll keep playing with it.

[parlough]

Thanks for the feedback and issues! Keep them coming :)

On this page ( https://flutter-docs-prod--pr11172-feat-site-redesign-pgdgowic.web.app/release/archive ), the tab defaulted to macOS - yay! Then I selected the other tabs and the "Windows" text never de-highlighted.

Could you provide a screenshot or video of this? I'm not sure I understand as I haven't been able to reproduce it. If it's easier, free to message me it too. Thanks!

[sfshaza2]

I can't reproduce it today, either. So, nvm.

[ericwindmill]

I don't want to bog down this work, so please let me know if you'd like me to hold off on comments until its ready for review.

I have some suggestions, and they all come down to personal preference. You should feel completely comfortable ignoring these if you disagree.

(Screenshots for reference)

Contrast: I feel there could be more contrast. (I like the colors otherwise.)

• The contrast between the background and the content background feels low.
• The breadcrumb box feels like it could be higher contrast from the text.
• The code block contrast from the content background could catch the eye more. I feel stronger about this on than the previous two.

Spacing:

• The width of the main content could expand more. On my MacBook, I would expect the content to take up all the available space.
• In general as it pertains to everything on the site: there could be more spacing (margin, padding, paragraph spacing, etc). There are so many elements and widgets on our site -- navs, note boxes, code blocks, videos, text sizes, header sizes -- and it feels busy and overwhelming to me. This is 100% preference. I just like minimalism and space in design. I also realize that this comment provides no concrete suggestions. Sorry 😃 . Also, this isn't an issue that your PR introduces, its something that I've felt about our site since the beginning. But this could be a chance to update it if you feel its a good idea.

In general, I love the updates. It looks so much more modern and less corporate-y. Also, thank you for doing this work in which everyone has opinions, despite not having expertise.

[sfshaza2]

@parlough, this looks and feels amazing. Thanks so much for all of your hard work. I'm going to approve this, but will let you land it when ready. Oh, and Kathy W approves of it, too. I showed it to her. :)

[mit-mit]

Yeah, this is shaping up super nicely!

I still think the logo needs to be the first thing in the top-nav. Yeah, that leaves an issue with what to do with the menu open/close button, but I'd punt on that to a later PR (i.e. remove that control for now). This just looks a lot nicer to me:

.

A concrete suggestion for an alternate open/close button design would be to make it similar to the Firebase Console one (which is a button at the very bottom of the nav).

[mit-mit]

Also, the spacing between the logo and wordmark is still a bit off:

[ericwindmill]

FWIW, automatic dark mode worked for me

[nate-thegrate]

Maybe consider adjusting the color scheme (subtract 15 degrees from the hue) so it's more aligned with the Flutter logo:

It'd be nice to have consistent hyperlink colors between the main content and when hovering on an "on this page" item. (I also think maybe the dark mode hyperlink color could "pop out" a bit more.)

	Light mode	Dark mode
main content	#004594	#ACC7FF
"on this page" item	#0468D7	#0468D7
suggestion:	#0468D7	#58C0ff

I'd personally prefer a shorter duration (and maybe a different curve?) for the search bar size change animation.

Overall thoughts: this looks phenomenal, simple yet modern vibes :)

[ericwindmill]

Maybe consider adjusting the color scheme (subtract 15 degrees from the hue) so it's more aligned with the Flutter logo:

I agree with this suggestion. (This is a nit, feel free to ignore.)

[guidezpl]

This looks beautiful, very well done! Don't want to bog down this PR, so filed #11217 for ideas to improve left navigation