With the gradual roll out of the new Document Libraries and Lists in SharePoint online, it appeared that the libraries purely adopted a “OneDrive” style User Interface that did not adopt the composed look branding, or the branding applied at tenant level to the suite bar.
For a number of tenants, this has gradually changed and we are starting to see composed looks become adopted, and there’s nothing else you’ll need to do differently to how you were previously. However, I have outlined a few steps below so that you can test custom branding in the new world, modern lists and libraries.
Turn on the “new look”
- Navigate to a library
- In the ribbon, click “Library” > “Library Settings”
- Click “Advanced Settings”
4. Scroll down to the bottom and under “List Experience” select “New Experience
5. Click ok
Which aspects does the composed look effect?
- Bottom border of the header
- Command bar icons
- Item hover
If you already have a custom composed look set, you should automatically see those colours picked up, as seen in the screenshot below. If you haven’t created a composed look, you can either select one of the other available themes under the “change the look” setting, or create your own composed look. A great tutorial on how to create a composed look can be seen at Marc Anderson’s blog:
Which aspects does the composed look miss?
The only negative aspect I have found is that the site image background colour is set inline to white. This means that any site icon that has white text and is a transparent PNG will suffer a little.
Additionally, the user experience is currently a little disjointed whereby the front end of the library adopts the new UI, whilst the library settings still uses the old UI. This is something I imagine Microsoft will gradually roll out to unify the whole experience.
How is the suite bar updated?
Currently, the suite bar isn’t being controlled by the composed look, but is being set a tenant level. As an admin, set the suite bar and accent colour by following these steps:
- Select the app launcher followed by “Admin”
2. Select your tenant name which is located in the top right corner
3. Scroll down to “Manage custom themes for your organization” and click “Edit”
4. Select on your desired colours