SharePoint にカスタムテーマを追加してみた

外観の変更の中で既定で用意されているテーマどれも気に入らないわぁ、なんて思う場面あるかと思います。

というわけで自分で選んだ配色でテーマを追加してみました。

以下、参考にしたサイト
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-powershell
https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/Add-SPOTheme?view=sharepoint-ps

カスタムテーマは基本的にJSON形式で定義する必要があるようです。しかし設定項目も多く1から書くのは難しいです。
でも大丈夫、MS公式のジェネレータがあります。

https://developer.microsoft.com/en-us/fabric?fabricVer=5#/styles/themegenerator

適当に配色しました。今回はPowerShell(SharePoint Online Management Shell)で実行するので一番右のものを利用します。

Theme Generator

ではSharePoint Online Management Shellでサクッと実行しましょう
※テナント管理者権限が必要です

$userCredential = Get-Credential -UserName $userName -Message "ユーザ情報の入力"
Connect-SPOService -Url https://thenantname-admin.sharepoint.com -Credential $userCredential

$themepalette = @{
"themePrimary" = "#c9f027";
"themeLighterAlt" = "#fdfef6";
"themeLighter" = "#f6fddb";
"themeLight" = "#eefabb";
"themeTertiary" = "#ddf67a";
"themeSecondary" = "#cef23f";
"themeDarkAlt" = "#b3d823";
"themeDark" = "#98b61d";
"themeDarker" = "#708615";
"neutralLighterAlt" = "#f69b9b";
"neutralLighter" = "#f29898";
"neutralLight" = "#e89292";
"neutralQuaternaryAlt" = "#d88888";
"neutralQuaternary" = "#ce8282";
"neutralTertiaryAlt" = "#c67d7d";
"neutralTertiary" = "#bb9d9d";
"neutralSecondary" = "#a48282";
"neutralPrimaryAlt" = "#8e6969";
"neutralPrimary" = "#351c1c";
"neutralDark" = "#623e3e";
"black" = "#4c2c2c";
"white" = "#fca0a0";
"primaryBackground" = "#fca0a0";
"primaryText" = "#351c1c";
"bodyBackground" = "#fca0a0";
"bodyText" = "#351c1c";
"disabledBackground" = "#f29898";
"disabledText" = "#c67d7d";
}

Add-SPOTheme -Identity "Custom Theme 01" -Palette $themepalette -IsInverted $false
コマンド実行

サイトを確認するとテーマが追加されたことが確認できます。

カスタムテーマを確認

適用も問題なくできます(うわぁ・・・

テーマを適用

現状テナントに対して「会社のテーマ」としてしか追加することは出来ないようです。

サイトコレクション単位への適用は、プロビジョニングのサイトスクリプトとしてテーマを適用するしかなく、既存のサイトに適用する手法は見当たりませんでした。(違ったらごめんなさい)
https://docs.microsoft.com/ja-JP/sharepoint/dev/declarative-customization/site-design-overview

追加自体はすごく簡単なんですが、現時点ではテナント管理者権限がなければテーマの追加自体は難しいのかな?CSOMでもREST APIでも出来ますので是非お試しを。