dark mode not working?

[booboothefool]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator, Storage (Storage Manager)

How is your app built?

next.js

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

us-west-1

Please describe your bug.

I am expecting this to enable dark mode but it is still white. Are there steps I am missing?

    <ThemeProvider colorMode="dark">
      <Card>
        <Button>Hello</Button>
        <Text variation="primary">Primary text</Text>
        <Text variation="secondary">Secondary text</Text>
        <Text variation="tertiary">Tertiary text</Text>
      </Card>
    </ThemeProvider>

What's the expected behaviour?

Expect components to be dark instead of white.

Help us reproduce the bug!

I cannot get any component to use dark mode.

Code Snippet

No response

Console log output

No response

Additional information and screenshots

No response

[ioanabrooks]

Hi @booboothefool, are you passing a dark theme override to the ThemeProvider? Amplify UI has one that you can use, see an example here.

[booboothefool]

Hi @booboothefool, are you passing a dark theme override to the ThemeProvider? Amplify UI has one that you can use, see an example here.

Oh, I didn't realize I needed overrides: [defaultDarkModeOverride] because I was already specifying colorMode="dark". That worked, thank you!

<ThemeProvider
  theme={{
    name: 'my-theme',
    overrides: [defaultDarkModeOverride]
  }}
  colorMode="dark"
>