Spinner does not support dark mode

[samuela]

Description

Spinner does not seem to have any support for dark mode AFAICT. Here's what it looks like:

Steps to reproduce

<ThemeProvider colorMode="dark" nightScheme="dark_dimmed">
  <Spinner />
</ThemeProvider>

Version

35.14.2

Browser

Chrome

[siddharthkp]

Hi!

Spinner gets it's foreground colors from the parent, so along with ThemeProvider, you would need to wrap your app in BaseStyles as well

import { ThemeProvider, BaseStyles, Spinner } from '@primer/react'

<ThemeProvider colorMode="dark" nightScheme="dark_dimmed">
  <BaseStyles>
    ...
    <Spinner />
    ...
  </BaseStyles>
</ThemeProvider>

Sandbox: https://codesandbox.io/s/magical-franklin-41yrk7?file=/src/App.tsx:484-519

[siddharthkp]

Closing this issue as answered, but feel free to comment back if this doesn't help and I'll open it again :)

[samuela]

Thanks so much @siddharthkp ! What does BaseStyles do exactly? Is there documentation for it anywhere? I was only aware of the existence of ThemeProvider

[siddharthkp]

BaseStyles are responsible for injecting global styles for primer/github

Reference: https://primer.style/react/getting-started#basestyles Source: https://github.com/primer/react/blob/main/src/BaseStyles.tsx

(It's opt-in because some applications at github inject globals throught a different library)

[samuela]

Ahhh, got it! Ok, thank you so much @siddharthkp !!