New site theming options for SharePoint sites in Office 365

‎08-07-201704:12 PM

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.

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.

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).

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.

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?

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.

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).

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.

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.

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

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 :).

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.

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.

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!

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.

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.

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. :)

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)!

@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!

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.

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!

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

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!

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-)

Hi @Peter Bakx - 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.