кастомный цвет бэкграунда белой темы next-themes

я делал переключение темы и для этого использовал next-themes, очень хотел бы сделать кастомный background в белой теме, попробовал сделать как в документации, но ничего не происходит. Есть ли какие то версии по решению?

index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "@radix-ui/themes/styles.css";
import App from "./App";
import "./index.css";
import { Theme } from "@radix-ui/themes";
import { ThemeProvider } from "next-themes";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider attribute="class">
      <Theme style={{ fontFamily: "Space Grotesk" }}>
        <App />
      </Theme>
    </ThemeProvider>
  </React.StrictMode>
);

index.css:

@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:300,regular,500,600,700);

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7fafc;
}

/* Остальные стили */
.redux-themes {
  --default-font-family: "Space Grotesk";
}

hr {
  padding: 0;
  margin: 0;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

[data-theme="light"],
[data-theme="light"] body {
  color: #fff;
  background: #f7fafc;
}

P.s. заранее спасибо за ответ)