Dark mode does not work

[entest-hai]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

React

Please describe your bug.

I follow an example from the official document to setup dark mode but it does not work

1. There is no file ** flipPalette**

import { flipPalette } from '../../../theme';

2. Event when I set colorMode='dark' directly for AmplifyProvider, dark mode still does not work

 <AmplifyProvider theme={theme} colorMode={colorMode}>

3. flipPalette can be found from this repository, then, the dark mode applied for ToggleButtonGroup only, not for entire page

What's the expected behaviour?

Should enable dark mode

Help us reproduce the bug!

Follow this example from the official document

Code Snippet

// Put your code below this line.

Additional information and screenshots

package.json

{
  "name": "amplify-ui-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^2.15.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.20",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "node-polyfill-webpack-plugin": "^1.1.4"
  }
}

No response

[zchenwei]

Hi entest, thanks for bringing this up! Like I said on Discord. The example is outdated and flipPalette is not a public API. We will be updating the example there in a bit. In the meantime you can try to change the flipPalette call with:

    neutral: {
      // flipping the neutral palette
      10: defaultTheme.tokens.colors.neutral[100],
      20: defaultTheme.tokens.colors.neutral[90],
      40: defaultTheme.tokens.colors.neutral[80],
      80: defaultTheme.tokens.colors.neutral[40],
      90: defaultTheme.tokens.colors.neutral[20],
      100: defaultTheme.tokens.colors.neutral[10],
    },

And have the other configs stay the same. Also, please make sure to use AmplifyProvider at the highest level of your App. I think that will enable you to turn on the dark mode. Let me know if that resolves your issues :)

[entest-hai]

@zchenwei thank you! actually, I then dived into the Amplify UI repository, found flipPalette and styles (CSS), and got dark for entire page. Look forward to the official updated.

[zchenwei]

@zchenwei thank you! actually, I then dived into the Amplify UI repository, found flipPalette and styles (CSS), and got dark for entire page. Look forward to the official updated.

No problem! Let us know if you have further questions. I will close this issue for now.