Websitedesign Themes in SharePoint online
Damit der SharePoint den Corporate Design Farben des Unternehmens folgt, kann man ein Custom Theme per PowerShell einspielen.
Das Theme auf einer Hubstartseite gilt immer für alle Sites in einem Hub. Auf Sites, die zu einem Hub gehören, kann man kein eigenes Theme erstellen. Benötigt man eine Site, die von diesem Schema abweicht - darf sie nicht im Hub sein.
Das Theme besteht aus 28 Farben. Jeder Farbe ist ein Name wie z. B. "themePrimary" zugewiesen. Auf diese Namen man dann in zb. Json bei der Spaltenformatierung referenzieren.
Theme Generatoren:
Home - Fluent UI (microsoft.com) < Ich nutze meistend diesen hier
Fluent UI Theme Designer
Tipp: in diesem Theme Generator kann man jede einzelne Farbe ändern! Aber ACHTUNG: Manche Farben werden an mehreren Stellen angezeigt - immer gut testen, bevor ein Theme abgesegnet wird. Der Design-Generator gibt außerdem Warnmeldung, wenn ein bestimmter Kontrast Schwellenwert unterschritten wird. (findet sich im Generator ganz unten unter dem Punkt "Accessibility")
Accessibility Warnung |
Der Code aus der Spalte "Powershell" ist für die hier beschriebene Methode wichtig.
PowerShell Theme Output (unten in hellblau) |
Theme per PowerShell einspielen oder überschreiben:
Connect-SPOService -Url https://Name-admin.sharepoint.com/
$themepalette = @{
"themePrimary" = "#cadd72";
"themeLighterAlt" = "#fdfef9";
"themeLighter" = "#f6fae7";
"themeLight" = "#eff5d2";
"themeTertiary" = "#dfeba7";
"themeSecondary" = "#d0e282";
"themeDarkAlt" = "#b6c868";
"themeDark" = "#9aa958";
"themeDarker" = "#717c41";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#b3bab3";
"neutralSecondary" = "#9ca39c";
"neutralPrimaryAlt" = "#858d85";
"neutralPrimary" = "#2f342f";
"neutralDark" = "#586058";
"black" = "#434943";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#2f342f";
"bodyBackground" = "#ffffff";
"bodyText" = "#2f342f";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}
Add-SPOTheme -Identity "Themename" -Palette $themepalette -IsInverted $false -Overwrite
Theme entfernen
Remove-SPOTheme -Identity "Themename" $true
Standard Themes ausblenden
Set-SPOHideDefaultThemes $true
Kommentare