Konsta UIには便利なuseTheme
フックが付属しており、App コンポーネントまたはKonstaProviderによって設定された現在アクティブなテーマ(ios
またはmaterial
)を検出できます。
/* 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>
</>
);
}