useTheme

Tailwind Mobile comes with handy useTheme hook to detect currently active theme (ios or material) set by App component or TailwindMobileProvider.

/* App.jsx */
import { App } from 'tailwind-mobile/react';
import { HomePage } from './path/to/HomePage.jsx';

export default function MyApp() {
  return (
    <>
      {/* set theme on App component */}
      <App theme="ios">
        <HomePage />
      </App>
    </>
  );
}
/* HomePage.jsx */
import { useTheme } from 'tailwind-mobile/react';
import { Page } from './path/to/HomePage.jsx';

export default function MyApp() {
  // get currently set theme
  const theme = useTheme();

  console.log(theme); // -> 'ios'

  return (
    <>
      <Page>
        {theme === 'ios' ? <p>Theme is iOS</p> : <p>Theme is Material</p>}
      </Page>
    </>
  );
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.