Closed
Description
To me, documentation is completely unclear and the example isn't updated. Following the example, you end up with a not working app (Nextjs _app.js):
/* eslint-disable react/prop-types */
import '../styles/globals.css'
import Head from 'next/head';
import { ThemeProvider } from '@callstack/react-theme-provider';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<ThemeProvider theme={{ foo: 'bar' }}>
<Component {...pageProps} />
</ThemeProvider>
</>
);
}Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
So, I followed the README, exporting from theming.js:
import { createTheming } from '@callstack/react-theme-provider';
export const themes = {
normal: {
primaryColor: '#FFA72A',
accentColor: '#458622',
backgroundColor: '#FFC777',
textColor: '#504f4d',
secondaryColor: '#7F5315',
},
crazy: {
primaryColor: '#1B8C81',
accentColor: '#458622',
backgroundColor: '#8FC266',
textColor: '#D94B2B',
secondaryColor: '#B9667F',
}
};
const { ThemeProvider, useTheme } = createTheming(themes.normal);
export { ThemeProvider, useTheme };Thanks god I can use useTheme it in my index.js! But... what's the theme property of the ThemeProvider? How can I add multiple themes, and maybe switch themes?