ブランディングに合わせたコンポーネントのスタイル設定

  • 3 分

Microsoft Graph ツールキット コンポーネントは、カスタマイズに柔軟に対応します。 コンポーネントの外観を変更する場合、一連のカスタム CSS プロパティを使用することで簡単に変更できます。

Microsoft Graph ツールキット コンポーネントは Shadow DOM を使用します。 これは、Microsoft Graph ツールキット コンポーネントが他の Web アプリから独立していることを意味しています。 たとえば、Web アプリのグローバルなフォントの色を青に変更しても、Microsoft Graph ツールキット コンポーネントでは、引き続き既定の色を使用します。

Microsoft Graph ツールキット コンポーネントのスタイル設定。

この分離は、Microsoft Graph ツールキット コンポーネントが常に意図された通りにレンダリングされ、Web アプリケーションの特定のスタイル設定に影響されないようにすることを目的とした意図的なものです。

Microsoft Graph ツールキットのコンテンツにスタイルを設定するには、コンポーネントが公開しているカスタム CSS プロパティを使用してください。 例えば、予定一覧コンポーネントのイベント表示に使用されるフォントの色を変更する方法:

<style>
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
    --agenda-event-location-color: blue;
  }
</style>

CSS カスタム プロパティを使用した Microsoft Graph ツールキット コンポーネントのスタイル設定。

各コンポーネントが公開しているカスタム CSS プロパティの詳細については、各コンポーネントのドキュメントを参照してください。

Microsoft Graph ツールキットには、ライト テーマやダーク テーマも用意されています。

テーマの切り替えのサポートを追加する最も簡単な方法は、コンポーネントを使用し、本文の mgt-theme-toggle 背景とフォントの色を変数に設定してテーマに従う方法です。

<head>
  <!-- trimmed for brevity -->
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
  </style>
</head>
<body>
    <!-- trimmed for brevity -->
    <mgt-theme-toggle></mgt-theme-toggle>
    <mgt-people-picker></mgt-people-picker>
</body>

ダーク テーマが適用された Microsoft Graph ツールキット コンポーネント。

カスタム ロジックを使用してアプリのテーマを切り替える場合は、Microsoft Graph Toolkit コンポーネントをプログラムで適用することでテーマに従うことができます。

<div id="graph">
    <mgt-people-picker></mgt-people-picker>
</div>
<script>
    let region = document.getElementById('graph');
    mgt.applyTheme('dark', region);
</script>

ダーク テーマを含む Microsoft Graph Toolkit コンポーネントのスクリーンショット。