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
Brass Contributor

This is a great step in the right direction. Will we have the ability to create our own palettes soon?

Steel Contributor

Thanks @Mark Kashman for the update. What's the status for admins, on a tenant level, configure these themes?

Brass Contributor

Great to hear this @Mark Kashman. I like to see there's a limited number of options presented to the user and cleaner options at that (i.e. only 6 to choose from). Do we know if it's going to use the same core functionality as the Composed Looks like the same .spcolor files just without the options to set fonts, master pages, and bg images?

Iron Contributor

 And the next question from SharePoint devs will be - can we apply these programmatically?  I was just struggling with programatically applying theme changes that are inherited by subsites in the classic experience.  Will these even be inheritable? 

Great step in the right direction. Cannot wait to see this live in action. The only concern I have will this be then the new theming engine that replace the current one and what about the Office 365 tenant wide theming. Looking forward to see this feature advance to more advanced branding scenarios. :D Thank you @Mark Kashman for sharing this update.

Hi @Mark Kashman. Will it be released to First Release (whole tenant), or First Release (select group) on Aug 21? 

Looking forward to seeing this in action! I agree with the other comments. It won't satisfy everyone with just six colors but its a great start! 

Copper Contributor

Another great feature would be the ability to (re)move the verticle navigation menu on the left-most part of Team Sites. The menu location used on the new Communication sites (along the top) is much better (in my opinion). 

Iron Contributor

I add my voice to the need to apply our own brand colours rather than just a canned set of themes. Themes good. Custom themes, Excellent!

Microsoft

Hi @Oliver Bartholdson - we do plan to support custom site themes, where there would be a central store for the custom theme files, that then can be selectged from the Change the look panel. We will showcase this at Ignite (Sept.2017) and put out change comms to note it as additional capabilities for site theming.

 

Thx, Mark.

Microsoft

Hi @Wictor Wilen - the team decided to first ship our out of box themes, and is wrapping up final testing to support custom site themes. We'll have more to share/show at Ignite this year, with guidance to follow once available. It'll be a method in how to build custom themes, and then how to place them in a central location so users can then select them from the Change the look panel. Thx, Mark.

Microsoft

Hi @Jason Cribbet - it is based on newer tech, and much of what we do 1st party, and soon you can do custom, is based on the new modern capabilities - which in this space have moved away from master pages and such. More to come soon on how and where :) -- Ignite 2017. Thx, Mark

Brass Contributor

Hey @Mark Kashman, let us know what session at Ignite. I'll be sure to be there. 

Thanks

Microsoft

Hi @Mary F Harvey - yes, we are working on the capability to inherit themes and other from a parent site down to it's associated sites - not always subsites, rather separate site collections. More to come and be shared at Ignite 2017 in this space; there's a dedicagted design/theming session with @Melissa Torres :).

 

Thx, Mark

Microsoft

Hi @Stefan Bauer - we'll certainly work our way up the stack. At this time, the post reflect at the site level, and at Ignite 2017, our team will budge up a level higher and tackle cross-site consistency. Cheers until then, Mark.

Microsoft

Hi @Darrell Webster - I believe the team will begin with FR (Select), and then quickly out to FR (Entprise wide), and then 10%/50%/100% WW production soon after. Cheers, Mark.

Microsoft

Hi @Charles McPadden - Fair feedback. There is a lot of the same tech behind the scenes of each site type (list, libraries, news, etc), and possibly a communication site would suffice your scenario accordingly, along with it a preferred nav element. Main difference between the two is Office 365 Groups integration (which equals permissions management and additional group application availability). Thx, Mark.

Microsoft

@Jason Cribbet - this will be a key one for most info related to the above blog post: "What’s new and what's coming for branding and organizing your SharePoint sites ": https://myignite.microsoft.com/sessions/53858?source=sessions with @Melissa Torres & Denise Trabona. Cheers, Mark.

Iron Contributor

So quite another reason to stop people modifying Master Pages then, I guess. Looking forward to see it in action, also feeling this goes into the right direction. Thanks for sharing, @Mark Kashman!

Silver Contributor
Out of interest did anyone receive Change the look on the 21st?
Iron Contributor

Nothing appearing on any of my portals. I assume it only affects Modern sites?

 

Silver Contributor
@Mark Kashman since you were brave enough to name a date any update on progress? Thanks and Regards.
Silver Contributor
@Simon Hudson yes definitely Modern Sites and initially First Release Selected Users then an onward rollout.
Iron Contributor

@John WynneThanks for the clarification. My tenants are on First Release, but I guess it takes time to propogate around the many DCs

Microsoft

Hi @John Wynne - and other engaging community members - I'm pleased to report that we have rolled out the new theming UX to all First Release (tenant and users) this past week. All First Release participants should be seeing the new experience. Thanks!

Microsoft

Yes, @Simon Hudson - the experience is initially only being rolled out to modern site templates (we'll follow w/ support for classic ones later). 

 

@Jason Cribbet - yes, more details, as Mark notes, at Ignite - including more on support for custom themes

 

@Charles McPadden - great feedback! Yes, we are looking into ways to provide more consistency across the site apps - and give folks more control over these "chrome" settings. Thanks!

Silver Contributor
Hi @Sean Squires, thanks for your reply. Just to confirm you are saying that all FR users, Full Tenant and Selected Users should be seeing Change the look? It hasn't reached my tenant yet, daily checking for this. I'm delighted it's on the way and hope to see it soon.
Microsoft

@Sean Squires I'm not seeing this yet either, and I am a First Release Select User in the tenant in question.

Microsoft

Thanks John, David - I'll double-check, but should have rolled to both First Release programs (tenant and user). Note that it uses the same permission model as classic site theming so it will only be an available option to those site users w/ designer-level perms (essentially site owner or site creators, not the content contributors). We are looking at opening it to contributors (feedback on that consideration welcome), but haven't implemented such a change yet.

Microsoft

Thanks @Sean Squires. I'm site collection admin and original creator of the site I was looking in and did not see it. May not have rolled all the way yet, or there is another setting dependency somewhere that my tenant has disabled that is not documented. Looking forward to trying this so my brand team will stop giving me the virtual evil eye, at least for a day or so. :)

Bronze Contributor

Cool stuff! You've almost (5 out of 6) hit our internal color palette. Guess we'll wait a little longer :D

Very interesting stuff about cross-site-collection theming up there. I'm eagerly awating Ignite for all those top/roll up level enhancements.

Silver Contributor
Hi @Sean Squires, I can confirm that I am as @David Rosenthal both Site Collection Admin and original site creator. My tenant is in West Europe, I'm UK based as further info. Thanks for your reply!
Silver Contributor

Seeing Change the look in Communication Sites today too. Good news.

Microsoft

Still nothing for me :( Must be still rolling out!

@David RosenthalI got this on First Release Select as of today, maybe it didn;t go to select at all.

 

@Mark KashmanThis doesn;t seem to change the colour used in the SharePoint Mobile app, my site still has a garish purple in the mobile header. Is there a plan to link the two, would seem natural ?

Microsoft

This just landed for me! I think you are right @Steven Collier, seems it hit First Release tenants first, and is just now making it out to First Release Select Users tenants.

Microsoft

Good news @John Wynne@David Rosenthal, and @Steven Collier ! Yes, it should have gone through to both programs, but we did another bump and that seems to have done it. Thanks for the updates (and patience)! More to come soon (yes, including alignment w/ mobile app, Steven)!

Brass Contributor

@Sean Squires, I'm seeing it in my tenant as well. Really like the update and seeing the instant feedback is great. I noticed within the mobile app for a communication site, the content was updating to the color changes. Looking forward to the entire site in the app updating. Great progress so far!

Brass Contributor

Is there a way of de-activating the option 'Change the Look', not showing in the Gear menu? Or at least only available to Central Administrators?

Copper Contributor

Modern site theming customization options - UI, CSOM, REST, and PowerShell. https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-si...

Microsoft

Hi @Carol Iven - no, not at this time. If you do not upload any custom themes and you disable the in-product ones the site owner will get a message that no themes are available, but we do not disable the menu option.

 

Thanks @Nikunj Patel! And don't forget to check out the theme builder tool: http://aka.ms/spthemebuilder 

Brass Contributor

Hi, 

 

I have noticed that SharePoint Modern Team Sites do not have the option to change the theme using the new theming method. Only in Office 365 groups and Communication Sites.

 

Are there plans or methods to apply this to those as well? 

 

Paul

Microsoft

Hi @Paul Bullock - the new theming experience is available for both the modern team (group-connected) and communication site templates only. Are you saying you aren't seeing it for group-connected team sites? Note that it is only rolled out to FR - we'll be expanding w/ the updated UX we previewed at Ignite in the coming month. Thanks!

Copper Contributor
On a Classic site I can access the theme colors programatically by using window.__themeState__.theme. However, on a Modern site (communication site) this variable is undefined. How do I access the theme colors programatically on a Modern site? Regards Leif
Deleted
Not applicable

Hi,

 

I'm not able to see "Change the look" option in the Gear menu. Should this be available on all tenant now? 

Deleted
Not applicable

I had to activate first release on my user, then i got the "Change The Look" in the Gear menu.

Brass Contributor

Hi @Sean Squires, i cannot change the theme on classic team sites that use the modern interface and site pages. Is the new site theming coming to classic team sites that utilise the new modern pages?

Microsoft

Hi @Paul Bullock - soon! The modern theme will apply to classic pages in modern sites (group-connected team and communication), but we haven't rolled the experience to classic site templates (due to way themes are processed there's some backend updates we need to implement first). We're working on it though and will keep the community apprised. Thanks for the feedback!

Deleted
Not applicable

Hi,

It is not yet available on our environment. Even if I'm in the first release group. I hope we can remove the "SharePoint Color Pallet Tool" soon. So all the colors could be customized to RGB values. Customers want to use the colors they are familiar with. Looking forward to test this big boy 8-)

Microsoft

Hi @Deleted - thanks for the interest! We should be fully rolled out to First Release (select users and tenants) by end of week. When you say remove the palette tool - do you mean hide in-product ones (in new UX) or the classic ones? For the former, be sure to check out the documentation for steps to do this (http://aka.ms/spsitetheming); for the latter, in future plans, but no ETA. 

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