Office 365: Nuevo generador de temas para SPO (I)!

Como sabéis, el Look & Feel de sitios modernos de SharePoint Online (SPO) se pudee cambiar de forma muy rápida mediante los nuevos temas introducidos durante 2017. Por defecto, disponemos de una serie de temas disponibles para personalizar nuestros sitios:

image

Afortunadamente, podemos crear nuestros propios temas personalizados y desplegarlos para poder hacer uso de los mismos en nuestros sitios modernos. Para crear estos temas haremos uso del nuevo generador de temas para SPO:

  • Accedemos en primer lugar al generador de temas que está disponible online en la siguiente Url:

https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

  • En el generador podemos empezar a “jugar” con las opciones de configuración disponibles para el tema como color primario para el tema, color de fuente o color de fondo:

image

  • El generador nos proporciona el output generado para el tema en tres formatos: JSON, SASS y PowerShell. De esta forma, tendremos disponible el tema para poder aplicarlo a nuestro Sitio haciendo uso de distintas opciones (Código PowerShell, Referenciando el código SASS en nuestro desarrollos SPFx o bien haciendo uso del JSON):

image

  • En el caso de PowerShell, la salida generada será similar a la siguiente:
@{
"themePrimary" = "#517d9e";
"themeLighterAlt" = "#f2f6f9";
"themeLighter" = "#dfe8ef";
"themeLight" = "#b1c6d7";
"themeTertiary" = "#789eba";
"themeSecondary" = "#5583a6";
"themeDarkAlt" = "#49708e";
"themeDark" = "#345065";
"themeDarker" = "#2c4457";
"neutralLighterAlt" = "#d9c7c7";
"neutralLighter" = "#d6c3c3";
"neutralLight" = "#d0b9b9";
"neutralQuaternaryAlt" = "#c5a9a9";
"neutralQuaternary" = "#be9f9f";
"neutralTertiaryAlt" = "#b89797";
"neutralTertiary" = "#bda7a7";
"neutralSecondary" = "#a88b8b";
"neutralPrimaryAlt" = "#936e6e";
"neutralPrimary" = "#201818";
"neutralDark" = "#5a4343";
"black" = "#3e2e2e";
"white" = "#ddcece";
"primaryBackground" = "#ddcece";
"primaryText" = "#201818";
"bodyBackground" = "#ddcece";
"bodyText" = "#201818";
"disabledBackground" = "#d6c3c3";
"disabledText" = "#b89797";
}
  • A continuación, se muestra la correspondencia del tema con la paleta de Office Fabric y ejemplos de como quedaría si hacemos uso de controles de Office Fabric:

image

  • Una vez que tenemos nuestro tema listo, para poder usarlo en nuestros sitios de SPO tendremos que desplegarlo en nuestro tenant de SPO haciendo uso de PowerShell (Nota: Podéis descargaros el script desde aquí:How to deploy a new theme to SharePoint Online):
############################################################################################################################################
# Script that allows to deploy a new theme to a SharePoint Online tenant
# Required Parameters:
#  -> $sThemeToDeploy: Theme to be deployed in the tenant.
#  -> $sSPOThemeName: Theme Name.
############################################################################################################################################

$host.Runspace.ThreadOptions = "ReuseThread"
if ((Get-Module Microsoft.Online.SharePoint.PowerShell).Count -eq 0) {
    Import-Module Microsoft.Online.SharePoint.PowerShell -DisableNameChecking
    }

#Definition of the function that remove external users in a SharePoint Online Tenant.
function Deploy-SPOTheme
{
    param ($sThemeToDeploy,$sSPOThemeName)
    try
    {  
        Add-SPOTheme -Name $sSPOThemeName -Palette $sThemeToDeploy -IsInverted $false -Overwrite

        Write-Host "----------------------------------------------------------------------------"  -ForegroundColor Green
        Write-Host "Theme Deploying. Getting the list of Themes in the SPO Tenant" -ForegroundColor Green
        Write-Host "----------------------------------------------------------------------------"  -ForegroundColor Green
        Get-SPOTheme
    }
    catch [System.Exception]
    {
        Write-Host -ForegroundColor red $_.Exception.ToString()   
    }    
}

#Connection to Office 365
$sUserName="<spo_user>@<O365Domain>.onmicrosoft.com"
$sMessage="Introduce your SPO Credentials"
$sSPOAdminCenterUrl="https://<O365Domain>-admin.sharepoint.com/"
$sThemeToDeploy=@{
"themePrimary" = "#517d9e";
"themeLighterAlt" = "#f2f6f9";
"themeLighter" = "#dfe8ef";
"themeLight" = "#b1c6d7";
"themeTertiary" = "#789eba";
"themeSecondary" = "#5583a6";
"themeDarkAlt" = "#49708e";
"themeDark" = "#345065";
"themeDarker" = "#2c4457";
"neutralLighterAlt" = "#d9c7c7";
"neutralLighter" = "#d6c3c3";
"neutralLight" = "#d0b9b9";
"neutralQuaternaryAlt" = "#c5a9a9";
"neutralQuaternary" = "#be9f9f";
"neutralTertiaryAlt" = "#b89797";
"neutralTertiary" = "#bda7a7";
"neutralSecondary" = "#a88b8b";
"neutralPrimaryAlt" = "#936e6e";
"neutralPrimary" = "#201818";
"neutralDark" = "#5a4343";
"black" = "#3e2e2e";
"white" = "#ddcece";
"primaryBackground" = "#ddcece";
"primaryText" = "#201818";
"bodyBackground" = "#ddcece";
"bodyText" = "#201818";
"disabledBackground" = "#d6c3c3";
"disabledText" = "#b89797";
}
$sSPOThemeName="New Corporate SPO Theme"

#Connecting to SPO
$Office365Cred = Get-Credential -UserName $sUserName -Message $sMessage
Connect-SPOService -Url $sSPOAdminCenterUrl -Credential $Office365Cred 

Deploy-SPOTheme -sSPOThemeName $sSPOThemeName -sThemeToDeploy $sThemeToDeploy
  • Una vez desplegado, simplemente comprobamos que el tema está disponible en cualquier sitio y que se aplica como se espera.

image

Referencia: