Enabling cssVariables with dark mode on is changing the color of AppBar

[shifoc]

Steps to reproduce

https://codesandbox.io/p/sandbox/adoring-firefly-x6cktw

Enabling cssVariables is changing the color of AppBar even though I have chosen another color for it

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.74)
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.0.2
@mui/icons-material: ^6.0.2 => 6.0.2
@mui/material: ^6.0.2 => 6.0.2
@mui/private-theming: 6.0.2
@mui/styled-engine: 6.0.2
@mui/system: 6.0.2
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-date-pickers: ^7.15.0 => 7.15.0
@types/react: ^18.3.4 => 18.3.4
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^4.9.5 => 4.9.5

Search keywords: theme code cssVariables

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @shifoc! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!