Build out a Theme component

[joshblack]

Build out a component that allows the user to specify the theme with a prop, storing the value in a context. This component will look like:

<Theme theme="white">
  <ChildComponent />
</Theme>

It can also contain a complex object (like a theme object)

import { g90 } from '@carbon/themes';

<Theme theme={g90}>
  <ChildComponent />
</Theme>

This component should provide a way for someone to "zone" a page, or specify what theme a particular component tree should render with (this will involve style updates). This may be through a prop, like zone, or is done automatically and is applied with a CSS selector.

This work should also include initial usage docs for the Theme component

[janhassel]

It would be great if the component would also accept a function to which it passes the current/inherited theme. This could help build out high-contrast/inverted zones:

<Theme theme={(currentTheme) => (currentTheme === 'g10' ? 'g100' : 'g10')}>
  <ChildComponent />
</Theme>

Or would this use case be covered by the linked useTheme hook?

[joshblack]

Great point @janhassel! I bet you could use the useTheme hook potentially:

function TestComponent() {
  const { theme } = useTheme();

  return (
    <Theme theme={theme === 'g10' ? 'g100' : 'g10'}>
      <ChildComponent />
    </Theme>
  );
}

Definitely let me know though if there is a use-case that the hook can't help out with and we can 100% add this behavior in for the theme prop

[janhassel]

@joshblack Sounds good! I can't think of anything where this solution wouldn't work 👍