Components do not update with programmatic changes in theme

[peterbe]

Describe the bug

We use <ActionMenu> in a couple of places on docs.github.com and they get the wrong theme applied to them.

In this screenshot you can see it twice. Once inside the modal (upper right-hand) and behind the modal too, where it has an action menu for "TYPE" and "TOPIC".

On docs.github.com we use auto as the default theme on the server-side generated HTML. Then, after the page has loaded we use useEffect to correct the theme preference based on a cookie (Cookies.get('color_mode')).

To reproduce it I think you need an OS that prefers dark, but override your settings on github.com to light.

Visit: https://docs.github.com/en/issues/guides

Incidentally, when I test in my Firefox (where I currently don't have a cookie that prefers light mode) this rather odd behavior happens (when I refresh and refresh and refresh the page):

https://user-images.githubusercontent.com/26739/184646968-a77715df-d395-491a-8e9e-7857d212f2d7.mov

The two ActionMenu buttons this time starts out in light mode and then later become dark.

To Reproduce Steps to reproduce the behavior:

1. Set your OS to prefer dark
2. Go to https://github.com/settings/appearance and select that you prefer one of the light themes
3. Visit https://docs.github.com/en/issues/guides
4. See error

Expected behavior

That the "TYPE" and "TOPIC" buttons appear in light mode. Like they do on the documentation:

Screenshots

See above.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version latest stable

Additional context

On docs.github.com we use:

    "@primer/css": "^20.2.4",
    "@primer/octicons": "17.3.0",
    "@primer/octicons-react": "17.3.0",
    "@primer/react": "^35.2.2",

(from our package.json)

[siddharthkp]

Hi!

I was able to reproduce with OS settings say Dark and github settings say Light. Added to primer/react inbox to triage what's causing it

[peterbe]

For what it's worth, ActionMenu isn't the only component that is buggy when the theme changes at render-time. It's also the Flash component. You can see an example of that here: https://github.com/github/docs-engineering/issues/2110

So now, there are 2 seemingly related bugs that exhibit the same apparent problem. These affect every GitHub Docs user that uses a theme that might conflict with their OS default.

[siddharthkp]

Relevant: https://github.com/github/docs-engineering/issues/2110#issuecomment-1228940095

[peterbe]

@siddharthkp Any news on this? We see reports of this trickling in from other people who have a OS theme that doesn't match their GitHub theme.

[lesliecdubs]

Hi @peterbe, thanks for your patience. We haven't heard reports of this outside of the docs. Can you give us a sense of how many user reports you've received about this recently?

In the meantime, I'll move this back to our project board's inbox to review/prioritize again with the team.

[justinbyo]

We reviewed this during our weekly triage and we moved it to unprioritized backlog. It's on our radar, but since it's not breaking the experience, we're going to de-prioritize and pick this up when we have the resourcing.