react: Components do not update with programmatic changes in theme

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)