EuiDataGrid not change theme with EuiProvider colorTheme

EuiDataGrid not change theme with EuiProvider colorTheme

The DataGrid background not change like text inside

My Code

import { useEffect, useState } from "react";
import {
  EuiPageSidebar,
  EuiPage,
  EuiProvider,
  EuiPageBody,
  EuiBottomBar,
  EuiHideFor,
  EuiPageTemplate,
  EuiPageSection,
  EuiPageHeader,
  EuiDataGrid,
  EuiButtonIcon,
  EuiThemeProvider,
} from "@elastic/eui"
import "@elastic/eui/dist/eui_theme_light.css";
import "@elastic/eui/dist/eui_theme_dark.css";
const data = [
  { id: 1, name: "Alice", age: 25, email: "alice@example.com" },
  { id: 2, name: "Bob", age: 30, email: "bob@example.com" },
  { id: 3, name: "Charlie", age: 35, email: "charlie@example.com" },
  { id: 4, name: "David", age: 40, email: "david@example.com" },
];

// Define the columns for the data grid
const columns = [
  { id: "id", displayAsText: "ID" },
  { id: "name", displayAsText: "Name" },
  { id: "age", displayAsText: "Age" },
  { id: "email", displayAsText: "Email" },
];
const Layout = () => {
  const [darkMode, setDarkMode] = useState(true);
  return (
    <EuiProvider colorMode="dark">
      <EuiDataGrid
        aria-label="Sample Data Grid"
        columns={columns}
        columnVisibility={{
          visibleColumns: columns.map((col) => col.id),
          setVisibleColumns: () => {},
        }}
        rowCount={data.length}
        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
      />
    </EuiProvider>
  );
};
export default Layout;

Demo Video https://github.com/user-attachments/assets/e5d99248-768f-4393-b8ba-2e916925d289

elastic / eui

EuiDataGrid not change theme with EuiProvider colorTheme #7990

My Code