Einblicke in den digitalen Arbeitsplatz mit Microsoft 365
Konzepte, Erfahrungen und technische Ansätze aus realen Projekten

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.



Das Theme erstellt man nicht per Hand, sondern mithilfe des Fluent UI Theme Generators.
Im Generator gibt man zu Beginn 3 Farben an (Hauptfarbe, Schriftfarbe, Hintergrundfarbe), alle anderen Farben werden anhand dieser Eingaben automatisch generiert. 

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

Über mich

Stephan Nassberger
Stephan Nassberger
Microsoft 365, SharePoint und Intranet, seit vielen Jahren Teil meiner täglichen Arbeit.

Der Blog bündelt Erfahrungen aus Projekten, Ansätze rund um Struktur, Governance und Informationsarchitektur sowie Beobachtungen aus dem Arbeitsalltag.

Fokus auf Lösungen, die im Unternehmen funktionieren. Klar aufgebaut, verständlich und nutzbar.

Kontaktformular