注意
Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。 開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。 詳細については、 非推奨のお知らせを参照してください。
各 Microsoft Graph Toolkit コンポーネントには、特定の要素の外観を変更するために使用できる CSS カスタム プロパティ のセットが文書化されています。 使用可能なカスタム CSS プロパティは、各コンポーネント ドキュメントにあります。例えば：
.person {
--person-avatar-size: 34px;
}
<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>
CSS カスタム プロパティを指定しない限り、コンポーネントの内部要素のスタイルを設定することはできません。 コンポーネントの子要素は 、シャドウ dom でホストされます。
柔軟性を高めるために、 カスタム テンプレートの使用を検討してください。
テーマを適用する
lightとdarkの 2 つのテーマを使用できます。 これらのテーマは、mgt コンポーネントで Fluent UI Web 要素を使用するため、自動的にサポートされます。 既定では、すべてのコンポーネントが light テーマに含まれています。
darkテーマに切り替えるには、mgt-theme-toggle コンポーネントを使用してドキュメント全体に対してグローバルに行うか、コンポーネントにカスタム CSS トークン値を設定してコンポーネントのテーマを更新できます。
例 1: mgt-theme-toggle を使用したグローバル テーマ
mgt-theme-toggle コンポーネントを使用すると、テーマ作成エクスペリエンスに便利な任意の場所に配置することで、ドキュメントのテーマを設定できます。 このコンポーネントは、 light モードと dark モードを切り替えるために使用できるトグルをレンダリングします。
<body>
<mgt-theme-toggle></mgt-theme-toggle>
<header><mgt-login></mgt-login></header>
<article><mgt-agenda></mgt-agenda></article>
<footer></footer>
</body>
例 2: テーマ切り替えなしでコンポーネントをプログラム的にテーマ化する
theme-toggle コンポーネントを使用せずに、プログラムで個々のコンポーネントにテーマを設定できます。 これは、モードをlightまたはdarkと HTML 要素として受け取る@microsoft/mgtからapplyTheme関数を呼び出すことによって実現されます。 既定では、すべての要素が light テーマにレンダリングされます。
特定の要素をダーク テーマに設定する
2 つ目の mgt-login コンポーネントをテーマ dark に設定し、他の 2 つのコンポーネントをテーマ light 残すことができます。
<mgt-login id="login-one"></mgt-login>
<mgt-login id="login-two"></mgt-login>
<mgt-login id="login-one"></mgt-login>
import { applyTheme } from "@microsoft/mgt-components";
const loginTwo = document.querySelector("#login-two");
if (loginTwo) {
applyTheme("dark", loginTwo);
}
例 3: コンポーネントの CSS トークンをカスタマイズする
現在のテーマの色をオーバーライドする場合は、いくつかの CSS トークンを使用してコンポーネントのスタイルを設定できます。 特定のコンポーネント ページを確認して、使用可能なトークンの一覧を取得します。
注: これらのトークンをカスタマイズすることは、設定値が使用される既定値であり、
mgt-theme-toggleコンポーネントを使用しても効果がないことを意味します。
<mgt-people-picker class="people-picker"></mgt-people-picker>
.people-picker {
--people-picker-selected-option-background-color: orange;
--people-picker-selected-option-highlight-background-color: red;
--people-picker-dropdown-background-color: blue;
--people-picker-dropdown-result-background-color: yellow;
--people-picker-dropdown-result-hover-background-color: gold;
--people-picker-dropdown-result-focus-background-color: green;
--people-picker-no-results-text-color: orange;
--people-picker-input-background: gray;
--people-picker-input-border-color: yellow;
--people-picker-input-hover-background: green;
--people-picker-input-hover-border-color: red;
--people-picker-input-focus-background: purple;
--people-picker-input-focus-border-color: orange;
--people-picker-input-placeholder-focus-text-color: yellow;
--people-picker-input-placeholder-hover-text-color: gold;
--people-picker-input-placeholder-text-color: white;
--people-picker-search-icon-color: yellow;
--people-picker-remove-selected-close-icon-color: blue;
/** You can also change the person tokens **/
--person-line1-text-color: blue;
--person-line2-text-color: red;
}
DOM 内のすべての要素に適用されるカスタマイズにグローバル トークンを使用することもできます。 ツールキットは、次のカスタム CSS グローバル トークンを定義します。
<mgt-file-list></mgt-file-list>
body {
/**
* Overrides the default font-family 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif for dark and light theme.
*/
--default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/**
* Overrides the default font-size of 14px
*/
--default-font-size: 20px;
}
例 4: Fluent UI CSS トークンをカスタマイズする
Fluent UI で使用されるトークンをカスタマイズして、 mgt コンポーネントで使用される fluent UI コンポーネントのスタイルを設定できます。 Fluent UI Web コンポーネントは、デザイン トークンのファーストクラスのサポートを提供し、デザイン トークンの設定、取得、および使用を簡単にします。
Fluent UI Web コンポーネントをカスタマイズする方法の詳細については、「 デザイン トークン」を参照してください。
または、既存のデザイン トークン値を独自の値でオーバーライドすることもできます。 設定した値は、基になる Fluent UI 要素を持つ mgt コンポーネントが使用される DOM 全体で使用されるため、この方法はお勧めしません。
lightまたはdarkテーマ モードでは変更されません。
<mgt-login></mgt-login>
body {
/**
* Overrides the default #ffffff color for dark theme and #000000 color for light theme
*/
--neutral-foreground-rest: yellow !important;
/**
* Overrides the default fluent UI components font-family
*/
--body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
lightテーマ モード:
darkテーマ モード:
