How do i get my chakra ui dark theme to work?

I've done everything the documentation says but the color mode work at all its still just a white screen. I've made use-system-colormode to true and made initalcolormode to dark and still see no changes.

I have a few components and I'm using a navbar as a test.

navbar.jsx:

import { Flex, Heading } from '@chakra-ui/react'
import React from 'react'

const Navbar = () => {
  return (
    <Flex boxShadow={'0 4px 2px -2px gray'} p={1} pos={'absolute'} h={'3rem'} alignItems={'center'} top='0'w={'100%'} borderBottom={'1px solid gray'} justifyContent={'space-between'}>
        <Heading size={'md'}>Change-Flix</Heading>

    </Flex>
  )
}

export default Navbar

App.js

import React from 'react';
import Navbar from './components/Navbar';
function App() {
  return (
   <>
   <Navbar/>


   </>
  );
}

export default App;

index.js:

import { ChakraProvider } from '@chakra-ui/react';
import React from 'react';
import { ColorModeScript } from '@chakra-ui/react';
import ReactDOM from 'react-dom/client';
import App from './App';
import theme from './components/theme'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ChakraProvider theme={theme}>
<React.StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />


    <App />
  </React.StrictMode>
  </ChakraProvider>
);

theme.js

  // theme.js

// 1. import `extendTheme` function
import { extendTheme } from '@chakra-ui/react'

// 2. Add your color mode config
const theme={

     config : {
        initialColorMode: 'dark',
        useSystemColorMode: false,
      }


}


// 3. extend the theme

export default extendTheme(theme)