Radix UI Theme dark mode not being applied

Question

I'm trying to create an app using Radix UI. The dark mode should be enabled by setting appearance="dark" but all the nested components such as Box and Card stay light.

The accent color prop works fine as well as other props, the only issue seems to be with dark mode.

This is the code.

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;