New site theming options for SharePoint sites in Office 365
Published Aug 07 2017 04:12 PM 105K Views
Microsoft

Sometimes there’s nothing like a fresh coat of paint to make a room or a house look new, familiar and engaging! Well, get your paint brushes ready. The new site theming experience was previewed in Orlando, FL last month at Microsoft Ignite and will begin rolling out as an update to First Release customers in a few weeks (early November 2017).

 

This new capability provides site owners with eight default themes that can be applied to all pages of the site; both within team sites and communication sites. Additionally, custom themes can be created and uploaded to a customer’s theme gallery and made available through the same Change the look panel within each site.

Click on the upper-right gear icon and select "Change the look" to open and select your preferred default or custom SharePoint site theme.Click on the upper-right gear icon and select "Change the look" to open and select your preferred default or custom SharePoint site theme.

See and learn more from two related Ignite sessions. 1) “Using custom themes and designs to standardize the creation of clean, functional SharePoint”, and 2) “What’s new and what's coming for branding and organizing your SharePoint sites.”

 

Change the look of your SharePoint sites in Office 365

Anytime is a good time to update the look and feel of your site. This may be simply to give it a little bump in visual interest, or to unify the experience for your users across multiple sites. And it’s easy, adjustable in minutes.

 

To get started, just click the upper-right site gear icon, and then select Change the look. You will now see your current theme selection in addition to any company themes your administrator has uploaded and six neutral and two dark SharePoint themes (note: these are optional as admins can use new PowerShell commands can hide Microsoft default site themes). You then can quickly click on each item and see the change in real-time.

You can configure the default SharePoint themes, adjusting the Main and Accent colors.You can configure the default SharePoint themes, adjusting the Main and Accent colors.

With this update, site owners can configure the default SharePoint themes by adjusting the Main and Accent colors (note: accent colors currently only show up in select web parts – like the Hero web part, with more coming in page regions and web parts in the future).

 

This new site theming experience is available on classic site templates, too. For classic sites, a new site theming panel will be available, allowing site owners to apply one of the new modern themes to all pages of the site by selecting the theme of their choice. Note: classic sites that do not use SP JavaScript will render un-themed if the site theme is changed. If you would like to maintain custom themes on classic sites, as administrator, you can opt out of the new theming experience by using Microsoft PowerShell.

 

For more information on working with SharePoint site themes, please review the Change the look of your SharePoint site support.office.com article and SharePoint site theming for in-depth documentation - including working with modern themes in classic sites.

 

Custom SharePoint site themes

Need a little more than out-of-box, and want to manage your site more programmatically? Well, now you can. SharePoint sites within Office 365 can have custom site themes, and admins can control which ones appear for their site users.

 

SharePoint site owners have new options for applying custom styles and colors to sites that make it easier to define and manage themes across site collections. These new features include:

  • The ability to define custom themes and make them available to site owners. Themes are defined in a JSON schema that stores color settings and related metadata for each theme.
  • A simplified set of default themes, with six light themes and two dark themes presently available.
  • Control over which themes are available for use on pages within your sites. For example, you can define custom themes based on your organization's branding or identity, and make those the only available themes within your sites.

For more info on creating and managing custom site themes – please try out the Theme Generator on developer.microsoft.com and review the SharePoint site theming articles on docs.microsoft.com for more insight into JSON schemas, PowerShell cmdlets (for adding and managing custom site themes in your theme gallery), API documentation, and more.

 

And you may have heard about SharePoint hub sites, and how a team site or communication site that is joined to a hub site will inherit the hub site theme. It’s important to note that you can think of hub sites, when they release in early 2018, as another site within Office 365 that can have out-of-box themes that can be configured and/or custom site themes – and whatever theme the hub site has applied, it will cascade down to the associated team and communication sites. This will help provide consistency across sites by your design.

 

In no-time you’ll have your sites looking spiffy, new and coordinated.

 

Thanks, and happy painting,

Mark

 

Frequently Asked Questions

Q: How can I expect the new SharePoint site theme capabilities to roll out to Office 365 customers?

A: Site themes and the ability to configure and/or customize them will begin to roll out to First Release customers approximately one week from the time of this post update —starting with First Release Select Users—and will be completed within 3-4 weeks. We are targeting end of November 2017 for complete worldwide rollout.

78 Comments
Deleted
Not applicable

Hi @Sean Squires I ment this https://www.microsoft.com/en-us/download/details.aspx?id=38182 one. I have been using this one for a long time for old UI changes. Thanks for the URL with the steps!

Iron Contributor

Excellent Webinar video from the SP Engineering team.  Includes demo of applying a custom theme.  Very informative.

https://www.youtube.com/watch?v=4SghyIuPdKw&feature=youtu.be

 

@Sean Squiresis it possible to modify a theme so that Headline style has a color applied, but not body text?  The Theme Generator doesn't appear to have that functionality.  Wondering if it is possible with hand coding. 

Microsoft

Hi @Beth Hall - not currently, but thanks for the feedback. As we continue to evolve the new model we'll extend the color slots (and update the theme generator tool to reflect/output them) to provide this flexibility. An interim option one of my designers suggested was using the RTE control to mimic this, depending on your design. Thanks!

Iron Contributor

Awesome, thanks for the update @Sean Squires - It would be really great if we could get some controls for each of the text styles. 

To allow a site administrator to specify default font style (B, I, U), color, size, and maybe even space before & after, each of the built-in formats.  I wouldn't want more formats because the users would get confused and use them wrong.  Such a feature would really empower the great new design features you guys are delivering!

Bronze Contributor

Hi @Sean Squires,

 

the documentation for theming mentions:

 

To verify your setup, try using the Get-HideDefaultThemes cmdlet to read the HideDefaultThemes setting. If the cmdlet runs and returns False with no errors, as shown in the following example, you're ready to proceed.

PowerShellCopy
c:\> Get-HideDefaultThemes
False

But there is no  information on what to do, when I get: CommandNotFoundException

 

We're on full tenant target release and have the new themes and accents available for selection online.

 

Copper Contributor

What a mess for an Enterprise with thousands of users. It maybe great for kooky little start up businesses. Can an Admin turn it off so users can't go berserk with their new kiddies paint box?  

Bronze Contributor

Of course you can - see the documentation (https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-si...

 

Nevermind my question I above. I just figured out, that if I don't have the commandlets available then I must have an older version.

Turns out there is a newer sharepoint online powershell oversion available. 

Brass Contributor

Great move. Can't wait to have it :)

Microsoft

Great @Ivan Unger! And yes, the updated cmdlets were checked into the 6906 build so be sure to at least be at that (or newer) build. 

 

@Richard Collins - thanks for the feedback. We recognize that admin control is important for features like this, so yes, the out-of-box ones can be complemented w/ your company ones or hidden altogether.

Copper Contributor

@Sean Squires I am getting the same error as @Ivan Unger . We are on:

 

vti_buildversion:SR|16.0.7108.1203

 

 

Getting this error:

> Get-HideDefaultThemes
Get-HideDefaultThemes : The term 'Get-HideDefaultThemes' is not recognized as the name of a cmdlet, function, script
file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct
and try again.
At line:1 char:1
+ Get-HideDefaultThemes
+ ~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (Get-HideDefaultThemes:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

 

Microsoft

Hi @Adam Coulombe - yes, I suspect you are running an old version. I use the SharePoint Online Management Shell (you can get latest - 7018 build - from the download center: https://www.microsoft.com/en-us/download/details.aspx?id=35588). Note that you'll need to uninstall your old version first. 

 

Copper Contributor

@Sean Squires Thanks! I see where I went wrong now ;) Upgrading to the new shell console solved my issue.

Bronze Contributor
After trying this out today I have to say I really dig the theming generator! Boy did I wish something like this was available back with 2013 onPrem ;) 10-15min and we're up and running with the latest company wide themes. A couple of minutes more and all the sites were changed accordingly.
Iron Contributor

We aren't seeing the new Theme panel for modern sites, our tenant is on First Release so I'm expecting it should be available at this point. I can add a custom theme using the Theme Generator and Powershell, but I can't get the new "Change the Look" menu to open, it always navigates to the classic theme portal.

 

We're seeing some odd behaviour with Themes in our Sharepoint Online tenant, we are working to update all our default landing pages to the Modern Pages so that our users have a consistent experience throughout Sharepoint, but at the moment the Modern pages dont seem to be fully honoring the classic themes (Orange accent colors are appearing in modern pages that arent a part of the classic theme, and that dont appear in classic views).

 

I'm assuming that if we could access the Modern theme panel we could resolve this. Do we just need to wait before our tenant is provisioned with the capability? or have i missed some switch somewhere that will activate it?

Microsoft

Hi @Dustin Adam - hmm, that's odd - the modern theming experience has been rolled out 100% WW so everyone should be seeing it. Note that the panel is only available on modern sites (group-connected team and communication; it hasn't been abled on legacy team and publishing site templates due to some code issues we need to resolve) - is that where you're trying to apply the custom theme or are you looking for it on a modern page on a classic site?

Iron Contributor

@Sean Squires, yep, thats exactly what our issue was, we onboarded to SharePoint prior to the Modern UI, so we are adding Modern pages to classic Team Sites. Any idea when this might be available? or alternatively, is there a way to programmatically apply themes to Modern pages on these sites through powershell? mostly just trying to normalize the color schemes which at the moment i can't seem to control, the Modern pages on classic team sites "sort of" honor the classic theme, but seem to be arbitrarily applying accent colors that arent a part of the classic theme (we've seen orange and even a horrible hot pink show up in button colors, which obviously doesn't look very professional).

Copper Contributor

Hello @Sean Squires I created a communication site and applied the correctly but, in the subsites the theme it's not inheriting from their parent and it's not appearing the option "Change the look" on the menu. So, how can I change the look in the subsites of a Communication Site? :)

Microsoft

Hi @Olga - inheritance of modern themes for subsites isn't currently supported. The modern themes are only available to the new templates (group-connected team and communication) at this time and only legacy templates are available for subsite creation. For now you'll have to continue using a classic theme equivalent for your subsites. Thanks for the feedback; it is a noted scenario and one are looking to rationalize as we expand both the theming capabilities and support model for subsites in the modern templates. 

Copper Contributor

Hi @Sean Squires

 

As I understand it, modern themes are currently only available on the 2 modern group-connected team and communication site templates.  Does that mean absorbing contextual themes for SharePoint customization's such as SPFx web parts and Fabric components would only work when they are housed in those specific site templates?

 

 

Warmly,

-Tracy

 

Copper Contributor

Hi Mark,

 

We are currently using script editor webpart with custom HTML, CSS and JS calls on our landing page in SharePoint Online. Are these updates something that an admin has to enable on the site collection or will the theming be automatically updated when released? Only concern would be the new theming will affect the existing code on the page. 

 

Thank you,

Dave

Copper Contributor

Hello, great work on communication site design so far !

I've a question : Is there by any chance a way to apply different color theme on multiple sites under the same hub ? A the moment, they all have the defaut theme set on the hub setting.

 

Thanks a lot for your response,

 

Gabriel

Microsoft

Hi @Dave Medeiros. Custom site themes need to be created and uploaded by IT as they get placed into a tenant-available via PowerShell, and the enabled for one or more sites. More here: http://aka.ms/spsitetheming

 

Thanks,

Mark 

Microsoft

Hi @Gabriel DETREMMERIE.

 

I'm looping in @Melissa Torres to keep me honest here. If you wish to have varying themes across site associated under a hub site, then I think you can do this by manually adjusting the site theme or a site(s) after it is associated to the hub. 

 

Melissa, is there a setting that Gabriel could switch that tells a site to stop inheriting the hub theme?

 

Thanks,

Mark

Microsoft

@Mark Kashman & @Gabriel DETREMMERIE, when a site is associated to a hub it will get that hub's theme by default and we make sure to keep it in sync so there is no way around it currently. Adding a switch to the hub to allow hub site owners to allow associated sites to choose their own themes is something we are considering as a future improvement. 

Copper Contributor

Thanks a lot for your quick answers @Mark Kashman & @Melissa Torres ! I hope to see this feature in the future, I think this could be a great advantage to improve the communications sites's diversity. Until then, keep it up, thank you for being so available to the community.

Copper Contributor

I used the below to opt out of site theming, but how can I change it back/restore/opt back in? I don't see any information on how to do this.

 

  1. To opt out of the site, you need to enable a feature:

    • Enter “Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B”
    • Verify that nothing is returned from the previous command (this confirms the feature isn’t enabled yet)
    • Enter “Enable-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B”
    • Enter “Get-PnPFeature -Scope Site -Identity 5138468E-3D76-4F72-9DE4-E029F1245A7B”
  2. Verify that the following is returned:

    ClientSideThemingOptOut - 5138468e-3d76-4f72-9de4-e029f1245a7b

Copper Contributor

Hi,

 

I'm searching how to define theme names in different languages.

 

SharePoint standard themes have multilingual names. How can I do the same ?

 

Thanks

 

 

Copper Contributor

Is it possible to override the hub's theme on spokes? We have a need for some sites related to hub to display their own theme but it seems in the current configuration they inherit from the hub. 

Version history
Last update:
‎Apr 09 2018 10:10 AM
Updated by: