Add dark mode to the Flutter blog

[conooi]

Adds dark mode support (Light, Dark, and Automatic) to the Flutter blog (flutter.dev/blog), matching the theme switcher experience on dart.dev and docs.flutter.dev:

• Header theme switcher: Renders NestedThemeSwitcher in the flutter.dev header when viewing /blog pages and auto-closes the dropdown menu on selection.
• Pre-paint theme initialization & persistence: Extracts shared themeInitScript and themeSyncBodyScript helpers in package:site_shared so both DashLayout and BlogLayout apply the stored localStorage['theme'] preference before first paint and stay in sync across browser back/forward navigation (pageshow), cross-tab storage events, and live OS prefers-color-scheme changes.
• Scoped blog dark theme styles: Adds dark mode CSS custom properties, .opal dark syntax highlighting overrides, header/footer dark styling, and diagram/icon contrast safeguards (--site-diagram-wrap-bgColor, .light-mode-visible, .dark-mode-visible, .theme-icon) scoped to body.blog in _blog_page.scss without affecting other flutter.dev marketing pages.
• Hydration optimization: Skips redundant .blog-card DOM class mutations in BlogCategories during initial hydration when the default all view is already server-rendered.

Fixes #13942

[gemini-code-assist]

Code Review

This pull request implements a comprehensive dark mode theme system for the blog, introducing a NestedThemeSwitcher component, centralizing theme initialization and synchronization scripts, and updating layouts, components, and SCSS styles to support dark mode. Feedback on the changes highlights a style guide violation where unawaited calls in ThemeSwitcher.dispose should include explanatory comments.

[flutter-website-bot]

Staged preview of the updated docs.flutter.dev site (updated for commit ae56abb):

https://flutter-docs-prod--docs-pr13954-blog-dark-mode-97n6shd9.web.app

[flutter-website-bot]

Staged preview of the updated flutter.dev site (updated for commit ae56abb):

https://flutter-dev-230821--www-pr13954-blog-dark-mode-tcpu8yil.web.app

[parlough]

Thanks for exploring this @conooi!

Generally looks great and like a good direction, with most of my remaining concerns about generalizing the style updates so future updates and maintenance are easier. Perhaps the capability can be expanded in the future as well.

Let me know if you have any questions or if you'd prefer I tackle any of the suggestions. Thanks again :D

[conooi]

Thanks for the review @parlough! I've updated the PR to address all of your feedback:

• Consistent document.body theme classes & focused init script: Updated ThemeSwitcher and themeInitScript to only target document.body (matching docs.flutter.dev), removed themeSyncBodyScript and the duplicate JS event listeners, and filtered the storageEvent listener in ThemeSwitcher to the 'theme' key.
• Layout cleanup: Moved themeInitScript into BlogLayout.leadingBodyElements, removed leadingHeadElements and the inline <style> tag, and added API doc comments to the DefaultLayout getters.
• Generalized theme styles:
  • Extracted the #theme-switcher and .light-mode-visible / .dark-mode-visible styles into a dedicated lib/styles/components/_theme-switcher.scss file.
  • Updated the shared _header.scss and _footer.scss files to use the --site-* CSS variables and moved the body.dark-mode variable overrides to _vars.scss, removing all custom dark-mode header/footer overrides from _blog_page.scss.
• Dark mode Flutter logo: Added flutter-logo-dark.svg (keeping the blue Flutter logomark with a white wordmark) for .dark-mode-visible in the header and footer so the icon mark doesn't turn solid white on dark backgrounds.

Ready for another look when you have a chance!

[gemini-code-assist]

Code Review

This pull request introduces dark mode support across the websites by defining theme-specific CSS variables, adding a ThemeSwitcher component, and using an inline script to apply the saved theme preference before the page paints. It also refactors the blog card layout logic using a new BlogCardLayout enum, updates the header and footer to support dark-themed logos, and improves dropdown focus behavior. The review feedback highlights potential runtime TypeError risks in dropdown.dart when casting event targets directly to web.Element, and notes styling regressions in the footer where removing explicit link colors causes them to default to the global blue link color instead of inheriting the muted footer text color.