How to use theming - 10 common examples

function customWithTheme<p>(
  // tslint:disable-next-line: no-unnecessary-generics
  Component: React.ComponentType</p><p>
) {
  return class CustomWithTheme extends React.Component {
    static contextTypes = themeListener.contextTypes;

    setTheme = (theme: object) =&gt; this.setState({ theme });
    subscription: number | undefined;

    constructor(props: P, context: ContextWithTheme) {
      super(props, context);
      this.state = { theme: themeListener.initial(context) };
    }
    componentDidMount() {
      this.subscription = themeListener.subscribe(this.context, this.setTheme);
    }
    componentWillUnmount() {
      const { subscription } = this;
      if (subscription != null) {
        themeListener.unsubscribe(this.context, subscription);
      }</p>

}
  return defaultTheme;
};

type Props = {
  styles: Styles,
  // eslint-disable-next-line flowtype/no-weak-types
  children: (classes: any) => React.Node
};

const createStylesCreator = (styles: Styles) =>
  typeof styles === 'function' ? styles : (theme: mixed) => styles;

class JssStyled extends React.Component {
  static contextTypes = {
    [theming.channel]: PropTypes.object
  };

  static _sheetsManager = new Map();
  _unsubscribe = null;
  _theme = null;
  _broadcast = brcast();
  _stylesCreator;

  get _inThemeContext() {
    return !!this.context[theming.channel];
  }

  constructor(props: Props, context: mixed) {
    super(props, context);
    this._theme = this._getThemeFromContext() || getDefaultTheme();

const withStyles = (styles: Styles, options?: HOCOptions = {}) => {
  const {index = getSheetIndex(), theming, injectTheme, ...sheetOptions} = options
  const isThemingEnabled = typeof styles === 'function'
  const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer

  return (
    InnerComponent: ComponentType = NoRenderer
  ): ComponentType => {
    const displayName = getDisplayName(InnerComponent)

    const getTheme = (props): Theme => (isThemingEnabled ? props.theme : ((noTheme: any): Theme))

    class WithStyles extends Component, State> {
      static displayName = `WithStyles(${displayName})`

      // $FlowFixMe
      static defaultProps = {...InnerComponent.defaultProps}

      static createState(props) {
        const sheet = createStyleSheet({

// $FlowFixMe: Flow complains for no reason...
      const {innerRef, theme, ...props} = this.props
      const sheet = dynamicSheet || staticSheet

      if (injectMap.sheet && !props.sheet && sheet) props.sheet = sheet
      if (injectMap.theme) props.theme = theme

      // We have merged classes already.
      if (injectMap.classes) props.classes = classes

      return 
    }
  }

  if (isThemingEnabled || injectMap.theme) {
    const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer

    // eslint-disable-next-line no-inner-declarations
    function ContextSubscribers(props) {
      return {theme => }
    }

    ContextSubscribers.InnerComponent = InnerComponent

    return ContextSubscribers
  }

  return Jss
}

colorTextPrimary: {theme.colorTextPrimary}
    <br>
    fontFamily: {theme.fontFamily}
    <br>
    lineHeightText: {theme.lineHeightText}
    <br>
  
);

// We're passing a default theme for Component that aren't wrapped in the ThemeProvider
ComponentWithTheme.defaultProps = {
  theme: tokens,
};

// Themed component cannot be used without ThemeProvider
const ThemedComponent = withTheme(ComponentWithTheme);
ThemedComponent.displayName = "ThemedComponent";

export { ThemedComponent as default, ComponentWithTheme as RawComponent };

// TODO: define own custom ThemeProvider based on theming
import { ThemeProvider } from 'theming';
import createDefaultTheme from '../theme';

ThemeProvider.defaultTheme = createDefaultTheme();

export default ThemeProvider;

const customTheme = {
  color: {
    primary: "red",
    secondary: "blue"
  }
};
type CustomTheme = typeof customTheme;

interface DemoBoxProps {
  text: string;
  theme: CustomTheme;
}
const DemoBox = ({ text, theme }: DemoBoxProps) => {
  return <div style="{{">{text}</div>;
};
const ThemedDemoBox = withTheme(DemoBox);
const renderDemoBox = () =&gt; ;

const App = () =&gt; {
  return (
    
      
    
  );
};

const AugmentedApp = () =&gt; {
  return (
    
       ({ ...outerTheme, augmented: true })}&gt;

constructor(props: P, context: ContextWithTheme) {
      super(props, context);
      this.state = { theme: themeListener.initial(context) };
    }
    componentDidMount() {

componentDidMount() {
      this.subscription = themeListener.subscribe(this.context, this.setTheme);
    }
    componentWillUnmount() {

componentWillUnmount() {
      const { subscription } = this;
      if (subscription != null) {
        themeListener.unsubscribe(this.context, subscription);
      }
    }
    render() {