Fix theme mismatch

[colebemis]

Why:

Fixes a theme mismatch issue that occurs when the OS color mode doesn't match the user's GitHub color mode (e.g., OS: dark, GitHub: light).

Before	After

Closes: primer/react#2229

What's being changed (if available, include any code snippets, screenshots, or gifs):

This bug was the result of a timing issue. After a page loads, the docs site switches the color mode to match the user's GitHub color mode. However, Primer React has a useEffect call that overrides this change, causing the site to ignore the user's GitHub color mode and revert to auto.

As a temporary workaround, I've wrapped the code that fetches the user's GitHub color mode in a setTimeout() call to ensure that it's called after Primer React's useEffect call. The long term solution to this theming issue is to migrate to CSS variables under the hood, which Primer is planning to do in the next couple quarters.

Check off the following:

• I have reviewed my changes in staging, available via the View deployment link in this PR's timeline.

  • For content changes, you will also see an automatically generated comment with links directly to pages you've modified. The comment won't appear if your PR only edits files in the data directory.

• For content changes, I have completed the self-review checklist.

[welcome]

Thanks for opening this pull request! A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.

[github-actions]

Thanks for submitting a PR to the GitHub Docs project!

In order to review and merge PRs most efficiently, we require that all PRs grant maintainer edit access before we review them. For information on how to do this, see the documentation.

[cmwilson21]

👋 @colebemis Thanks for the PR! 🎉

I see this is a draft PR, but I'll go ahead and get this triaged. Feel free to ping me when it's ready for review! ✨

[colebemis]

👋 Hi, @cmwilson21! This PR is ready for review now

[rachmari]

This looks great @colebemis! Thank you for the fix. ✨

To note, I modified my GitHub appearance preference to light mode, and my OS is already dark mode. I added a color_mode cookie to the preview site spun up by this PR and verified that the components were rendering correctly with the change.

[peterbe]

@colebemis Thanks!!
What would be great is if that hack was accompanied with an explanation. Sooner or later someone's going to see that code and (fail to do a git blame lookup back to the (your) PR) wonder; what does this do?

[peterbe]

Also, is it fair to say that this closes that bug in Primer? Seems like the bug is still present in a sense.

[peterbe]

Tested locally and it solves the problem. Wo'hoo!

It's a bad sad that we collectively don't understand it better and that it's even necessary.
I'm still not sure if it's fair to say this PR here closes that @primer/react bug, technically. But I'm also not sure if I care enough :) It definitely solves the bug for us.

If you could think of a good code comment to inject just before the setTimeout(... that would be great. Perhaps a mention of the URL primer/react#2229 (it's a public repo after all)

[colebemis]

I'm still not sure if it's fair to say this PR here closes that @primer/react bug, technically. But I'm also not sure if I care enough :) It definitely solves the bug for us.

@peterbe Good point. I'm comfortable closing the primer/react issue since we're actively rewriting our styling architecture and theming system (https://github.com/github/primer/issues/1626). ThemeProvider will be completely rewritten to use CSS variables as part of that work.

[heiskr]

I vaguely remember proposing something similar at one point lol, but lost track of it. Looks great to me :)

[peterbe]

Would you mind running
./node_modules/.bin/prettier --write components/hooks/useTheme.ts
on this branch. I think when Rachael suggested the code comment in the web UI, it injects excess whitespace at the end of some of the lines.

[colebemis]

@peterbe Good catch. Done 👍

[peterbe]

FOR THE RECORD.

Been chatting to @colebemis and the docs-engineering team in Slack. We're eager to see this land but we won't merge it till after May 24th. This is to be conservative and avoid any risk of causing any reliability issues on Docs when the monolith is observing a frozen tree.

[github-actions]

Thanks very much for contributing! Your pull request has been merged 🎉 You should see your changes appear on the site in approximately 24 hours. If you're looking for your next contribution, check out our help wanted issues ⚡