Konsta UI comes with handy useTheme
hook to detect currently active theme (ios
or material
) set by App component or KonstaProvider.
/* App.jsx */
import { App } from 'konsta/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, Page } from 'konsta/react';
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>
</>
);
}