Estoy implementando un modo oscuro, pero no entendí cómo usar el tema dentro de mi GlobalStyle, estoy tratando de implementar esto desde hace 4 días, vi innumerables videos. Estoy atascado en este error en este momento:

 Uncaught ReferenceError: theme is not defined GlobalStyle GlobalStyle.jsx:7

GlobalStyle.jsx

 import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` body{ margin:0; padding:0; background-color: ${props => theme.colors.primary}; // error HERE !!! color: ${props => theme.colors.text}; } `;

Aplicación.jsx

 import { useContext } from "react" import { ThemeLocalContext, ThemeLocalProvider } from "./context/themeContext" import { ThemeProvider } from "styled-components" import {Paths} from "./pages/Paths/" import { GlobalStyle } from "./styles/GlobalStyle/GlobalStyle" function App() { const theme = useContext(ThemeLocalContext); console.log(theme) // this print my theme object return ( <div> <ThemeLocalProvider> <> <ThemeProvider theme={theme}> <GlobalStyle/> <Paths/> </ThemeProvider> </> </ThemeLocalProvider> </div> ) } export default App

ThemeContext.jsx

 import React, { createContext, useState } from "react"; import { lightTheme } from "../styles/Theme/lightTheme"; import { darkTheme } from "../styles/Theme/darkTheme"; export const ThemeLocalContext = createContext(lightTheme); export const ThemeLocalProvider = ({children}) => { const [theme, setTheme] = useState(lightTheme); const handleChange = (theme) => { setTheme(theme.title === 'light' ? darkTheme : lightTheme); } return ( <ThemeLocalContext.Provider value={theme}> {children} </ThemeLocalContext.Provider> ) }