useTheme

Konsta UIには、AppコンポーネントまたはKonstaProviderで設定された現在アクティブなテーマ (iosまたはmaterial)を検出するための便利なuseThemeフックが付属しています。

<!-- App.svelte -->
<script>
  import { App } from 'konsta/svelte';
  import HomePage from './path/to/HomePage.svelte';
</script>

<!-- set theme on App component -->
<App theme="ios">
  <HomePage />
</App>

<!-- HomePage.svelte -->
<script>
  import { useTheme, Page } from 'konsta/svelte';

  let theme;
  theme = useTheme((newValue) => {
    // to keep it reactive, update value on theme update in parent components
    theme = newValue;
  });

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

<Page>
  <p>Theme is {theme === 'ios' ? 'iOS' : 'Material'}</p>
</Page>