SharePointOnlineモダンサイトの色をカスタマイズしてみる

MS開発部の永田です。

SharePointOnlineモダンUIのテーマカラー変更について、標準で用意されているテーマカラーの変更と、それだけでは足りないという方もいると思いますので、独自のカラーでカスタムする方法について記載したいと思います。

標準で用意されているテーマカラー

まずはSharePointが標準で用意しているテーマの選択方法ですが、画面右上の歯車から外観の変更を選択します。 外観の変更を選択すると、標準で用意されているテーマカラーの一覧が表示されるので、その中から変更したいテーマを選択することで簡単に外観を変更することが可能です。
例えば紫を選択すると、リンクの文字色や、ヒーローウェブパーツの色などがデフォルトの青から紫に変更されているのが分かるかと思います。
標準の選択肢の中から変更したい場合は簡単ですね。
また、このテーマに合わせて独自で開発したWebパーツの色を連動して変更したい場合は、こちらの記事を参考にしてください。

独自テーマカラーを作成

モダンUIのサイトで独自のカラーを定義するには、まず「テーマジェネレータ」サイトを利用します。
変更したい色で「Primary theme color(主題色)」「Body text color(本文テキストの色)」「Body background color(ボディの背景色)」を選択します。試しにグリーン系で選んでみました。

色を選択したら、画面下にある「PowerShell」のテキストボックスから自動生成された値をコピーしておきます。
PowerShellを実行するにあたり「SharePoint Online Management Shell」のインストールが必要なので、まだの方はこちらからインストールしてください。

$themeName = "緑色テーマ" #追加したいテーマの名前
Connect-SPOService -Url https://<テナント名>-admin.sharepoint.com

#@{}の中身はサイトでコピーした値で置き換えてください
$themepallette = @{
"themePrimary" = "#00c484";
"themeLighterAlt" = "#e9fff8";
"themeLighter" = "#c7ffec";
"themeLight" = "#76ffd1";
"themeTertiary" = "#13ffb0";
"themeSecondary" = "#00d28c";
"themeDarkAlt" = "#00b176";
"themeDark" = "#007e54";
"themeDarker" = "#006c48";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c3d9c2";
"neutralSecondary" = "#97be95";
"neutralPrimaryAlt" = "#7aac79";
"neutralPrimary" = "#75a873";
"neutralDark" = "#467045";
"black" = "#3d603b";
"white" = "#fefefe";
"primaryBackground" = "#fefefe";
"primaryText" = "#75a873";
"bodyBackground" = "#fefefe";
"bodyText" = "#75a873";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}

# テーマを追加
Add-SPOTheme -Name $themeName -Palette $themepallette -IsInverted $false
# テーマを上書き
# Add-SPOTheme -Name $themeName -Palette $themepallette -IsInverted $false -Overwrite
# テーマを削除
# Remove-SPOTheme -Name $themeName

Disconnect-SPOService

このPowerShellを実行すると、サイトに新規のテーマが追加されます。

PowerShellと聞くと拒絶反応がある方もいるかもしれませんが、これだけの操作で新規テーマの追加が可能です。

また、今回はPowerShellで実行しましたが、RESTやCSOMでも実行可能です。やり方はMSのサイトで公開されているので、こちらのサイトを参考にしてください。