Elevate SharePoint Experience with Custom Themes

Custom branding in SharePoint for Microsoft 365 is vital for stakeholders as it ensures consistency and reinforces the organization's identity across all its digital touchpoints. A well-branded SharePoint site enhances user engagement, builds trust, and fosters a sense of belonging among employees. It allows organizations to present a professional image, which is crucial for internal communication and external partnerships. By aligning the SharePoint site's look and feel with the company's branding guidelines, stakeholders can effectively communicate their values, mission, and vision, thereby creating a cohesive experience for all users.

Using PowerShell

Step 1: Create a Custom Theme

1. Access the Theme Generator Tool: Use the Theme Generator tool to select your primary, text, and background colors.

2. Export Theme as PowerShell Code: Once you've designed your theme, export it as PowerShell code.

Step 2: Connect to SharePoint Online Management Shell

Open the SharePoint Online Management Shell: Launch the SharePoint Online Management Shell on your computer.

Connect to Your Tenant: Use the Connect-SPOService command and provide the URL for your SharePoint Online admin site.

Create a Variable for the Theme Palette: Define a variable in PowerShell that includes the theme colors.

Use the Add-SPOTheme Command: Use the Add-SPOTheme command to add the custom theme to your SharePoint tenant. Apply the Custom Theme

Navigate to your SharePoint site, then Change the Look,Click on the gear icon, select "Change the look," and apply your custom theme.

Sample Powershell script

   Connect-SPOService -Url https://yourtenant-admin.sharepoint.com   Add-SPOTheme -Identity "CustomTheme" -Palette $themePalette -IsInverted $false        

Optional Steps:

Hide Default Themes: If you want to hide the default SharePoint themes, use the Set-SPOHideDefaultThemes command.

    Set-SPOHideDefaultThemes $true        

Removing the Custom Theme (if needed): If you need to remove the custom theme, use the Remove-SPOTheme command with the identity parameter.

    Remove-SPOTheme -Identity "CustomTheme"        

Using the Brand Center

Step 1: Navigate to the SharePoint Admin Center: Go to the SharePoint Admin Center and select the "Brand Center" option.

Step 2: Configure Fonts and Colors: Set up the fonts and colors that you want to use for your custom theme.

Step 3: Create a Custom Theme: Utilize the branding tool within the Brand Center to select your primary, text, and background colors. Save your custom theme within the Brand Center.

Step 4: Apply the Custom Theme:Navigate to your SharePoint site.Click on the gear icon, select "Change the look," and apply your custom theme.

Optional Step: Upload Design Assets: You can upload additional master pages, JavaScript files, and other design assets to the Master Page Gallery if desired.

Dos and Don'ts:

- Dos:

Ensure that your branding aligns with your organization's guidelines.

Test your theme on different devices to ensure compatibility.

Get feedback from users and stakeholders before finalizing the theme.

- Don'ts:

Use colors that clash or are hard to read.

Overcomplicate the design with too many elements.

Forget to back up your original theme in case you need to revert.

Best Practices:

Consistency: Maintain consistency across all SharePoint sites.

Accessibility: Ensure that your theme is accessible to all users, including those with disabilities.

Performance: Optimize your theme to ensure it does not slow down your site.

Documentation: Document your custom theme for future reference and maintenance.

Checklist for Implementation:

1. Define your organization's branding guidelines.

2. Use the Theme Generator tool to create a custom theme.

3. Export the theme as PowerShell code or save it in the Brand Center.

4. Connect to the SharePoint Online Management Shell or use the Brand Center.

5. Add and apply the custom theme to your SharePoint site.

6. Test the theme on different devices.

7. Get feedback from users and stakeholders.

8. Make necessary adjustments based on feedback.

9. Implement best practices and ensure accessibility.

10. Document the custom theme for future reference.