callstack / react-theme-provider

A set of utilities that help you create your own React theming system in few easy steps
MIT License
465 stars 54 forks source link

Documentation unclear, example outdated, can't make it work #100

Open gremo opened 3 years ago

gremo commented 3 years ago

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?