Fix: Theme flicker on page change

[dixita0607]

Fix for theme flash issue that we recently fixed on dart's website dart-lang/site-www#7007

Before
https://github.com/user-attachments/assets/7629b755-fe7f-4f40-9664-e285ed336a23

After
https://github.com/user-attachments/assets/db3b20f9-0cc7-4642-960b-e73de152383b

Presubmit checklist

• If you are unwilling, or unable, to sign the CLA, even for a tiny, one-word PR, please file an issue instead of a PR.
• If this PR is not meant to land until a future stable release, mark it as draft with an explanation.
• This PR follows the Google Developer Documentation Style Guidelines—for example, it doesn't use i.e. or e.g., and it avoids I and we (first-person pronouns).
• This PR uses semantic line breaks
  of 80 characters or fewer.

[gemini-code-assist]

Summary of Changes

Hello @dixita0607, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a visual inconsistency where the website's theme would briefly appear incorrect before loading the user's chosen preference. By strategically reordering the theme application script to execute earlier in the page rendering process, the change ensures a seamless and immediate display of the correct theme, enhancing the user experience by eliminating the distracting flicker.

Highlights

• Theme Flicker Fix: The inline JavaScript responsible for applying the user's theme preference (light, dark, or auto) has been moved to an earlier position in the document's script loading order. This change prevents a visual flicker or 'flash' of the incorrect theme before the preferred theme is applied on page load.
• CSS Hash Update: The generatedStylesHash constant in site/lib/src/style_hash.dart has been updated, indicating a change in the main.css file, likely reflecting styling adjustments related to the theme fix or other minor style updates.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses the theme flickering issue by moving the theme-setting script to execute earlier in the page load process. The change is logical and correctly placed to prevent the flash of an incorrect theme. I've added one suggestion to improve the robustness of the script by handling cases where localStorage might be unavailable.

[gemini-code-assist]

Accessing window.localStorage can throw an exception if it's disabled by the user (e.g., in browser privacy settings or incognito mode). This would cause the script to fail, preventing the theme from being applied and potentially disrupting page rendering. To make this more robust, it's best to wrap the logic in a try...catch block to handle such errors gracefully.

<script>
try {
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

  const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
  if (storedTheme === 'auto-mode') {
    document.body.classList.add(
        'auto-mode',
        prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
    );
  } else {
    document.body.classList.add(storedTheme);
  }
} catch (e) {
  // localStorage is not available, do nothing and fallback to default.
}
</script>

[dixita0607]

Should I go ahead with this suggestion?

[parlough]

Let's land this PR as is to keep it focused, but feel free to open a follow-up PR. Thanks for checking though :)

[parlough]

/gcbrun

[flutter-website-bot]

Visit the preview URL for this PR (updated for commit 3d73738):

https://flutter-docs-prod--pr12673-fix-flicker-on-page-change-abp44bg0.web.app

[parlough]

Thanks for migrating this fix over!

[parlough]

Let's land this PR as is to keep it focused, but feel free to open a follow-up PR. Thanks for checking though :)