I'm having trouble getting the dark mode to work properly in my Radix UI app. Despite setting appearance="dark", nested components like Box and Card remain light.
Interestingly, other props such as accent color seem to be working fine. It's just the dark mode that's causing issues.
Here's the code snippet:
import { Grid, Theme } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';
import './App.css';
function App() {
return (
<Theme appearance="dark" accentColor="ruby" radius="large">
<Grid columns="1" rows="2" align="center">
<FirstComponent />
<SecondComponent />
</Grid>
</Theme>
);
}
export default App;