{"id":516,"date":"2017-04-14T12:50:53","date_gmt":"2017-04-14T12:50:53","guid":{"rendered":"https:\/\/itgroove.net\/align\/?p=516"},"modified":"2023-02-23T15:41:14","modified_gmt":"2023-02-23T23:41:14","slug":"change-color-spo-modern-experience","status":"publish","type":"post","link":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/","title":{"rendered":"How To: Change the Color in the Sharepoint Online Modern Experience"},"content":{"rendered":"

2018 Note:<\/strong> A lot has changed in the SharePoint Online modern experience since I wrote this post a year ago. Though some of this information may still help you, there are now better ways to brand modern sites; this post by Corrie Haffly<\/a> is a great resource, as well as this video from Yaroslav Pentsarskyy<\/a>.<\/p>\n

I’d love if you took a few minutes to check out our navigation builder for SharePoint Online – Masthead<\/a>. It allows anyone to create beautiful navigation, managed in one place, that spans all of your site collections. Masthead is free to try<\/strong> on one site collection, and right now, we’re offering 10% off<\/strong> your first year’s subscription (either monthly, or yearly). We’ve poured our hearts into the project and we’re eager to hear your feedback, so if you have any thoughts to share, please do get in touch with us.<\/p>\n

Hey, thanks for reading my spiel. Now, let’s get to what you came here for… shall we?<\/p>\n

 <\/p>\n

\n

 <\/p>\n

You may have noticed that with the SharePoint Online modern experience, your lists and libraries are styled in all colors of the rainbow.<\/p>\n

 <\/p>\n

Example:<\/h4>\n

\"SharePoint<\/p>\n

\"SharePoint<\/p>\n

What if you want this modern experience to look cohesive with the rest of your SharePoint Intranet?<\/p>\n

We’ve discovered that you can change the color in the SharePoint Online modern experience through the Change The Look functionality. It’s quick, simple, and requires no code knowledge.<\/p>\n

How to Change the Color in the Sharepoint Online Modern Experience<\/h2>\n

First, download the SharePoint Color Palette Tool<\/a>. Then, open it up.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

See the Recolor<\/strong> button up at the top? Click on the swatch beside it, and place your company or client’s main colour there. Note that the tool uses RGB, so if you’re using a Hex code, you’ll need to convert it to get the RGB values. You can do that here<\/a>.<\/p>\n

I’m going to choose a nice orange colour that will stand out.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Click OK<\/strong>, then click that Recolor<\/strong> button. You should see a preview of what your new coloring will look like.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Go up to File<\/strong>, then Save your .spcolor file.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Now, head to your site collection and click on Site Settings<\/strong> up in the cog. Under Web Designer Galleries<\/strong>, choose Themes<\/strong>. Click on the folder labeled 15<\/strong>.<\/p>\n

UPDATE! (September 2017).<\/strong> In some environments, it appears that Themes option is no longer available in Site Settings. In this cases, you’ll have to deploy the theme via PowerShell. There are numerous resources online on how to do that. As always, test in a sandbox before doing it somewhere important. \ud83d\ude09<\/em><\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Upload your .spcolor file there.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Go back to Site Settings<\/strong>, and click on Composed Looks<\/strong>.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Click New Item<\/strong>, then enter the Title, Name, and Display Order (set it to 1) of your new Composed Look. I save the Composed Look with just those two things, then choose Quick Edit<\/strong> to copy the URLs from the other Composed Looks which makes life easier. You may have the paths memorized, which makes you cooler than me. This is just how I do it.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

From there, copy the URL of the Masterpage (we use Seattle mostly) and another Theme URL, then replace the name in the Theme URL with the name of the .spcolor file. I left the Image URL and Font Scheme URL paths blank, because those are taken care of with our regular UX\/branding.<\/p>\n

\"Quick<\/p>\n

 <\/p>\n

You’re going to go back up to the cog menu, and choose Change the look<\/strong>. You should see your new theme up top if you had set the Display Order to 1. Click on your theme.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

Then, click Try it out<\/strong>, and Yes, keep it<\/strong> if everything looks good.
\n\"SharePoint<\/p>\n

The modern experience in your SharePoint Online site collection should now be styled with the colors that you chose.<\/p>\n

\"SharePoint<\/p>\n

 <\/p>\n

This isn’t a perfect solution, as it requires you to update each site collection with multiple instances of the .spcolor file. If you’d like to automate the process using PowerShell, Joao Ferreira has written a post including instructions and a script HERE<\/a>.<\/p>\n

Disclaimer:<\/strong> This may not play well with certain environments, depending on your UX setup. If this solution doesn’t work well with your setup, just revert your changes by switching the Theme back to Default. Also, SharePoint may change in the future and nullify this information. I’ll try to update this blog post when\/if it does. Proceed at your own risk! <\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

2018 Note: A lot has changed in the SharePoint Online modern experience since I wrote this post a year ago. Though some of this information may still help you, there are now better ways to brand modern sites; this post by Corrie Haffly is a great resource, as well as this video from Yaroslav Pentsarskyy. I’d love if … <\/a><\/p>\n","protected":false},"author":5,"featured_media":535,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8,12,19],"tags":[136,137,144,151,152],"acf":[],"yoast_head":"\nHow To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski\" \/>\n<meta property=\"og:description\" content=\"2018 Note: A lot has changed in the SharePoint Online modern experience since I wrote this post a year ago. Though some of this information may still help you, there are now better ways to brand modern sites; this post by Corrie Haffly is a great resource, as well as this video from Yaroslav Pentsarskyy. I’d love if …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"Karin Skapski\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-14T12:50:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-23T23:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1347\" \/>\n\t<meta property=\"og:image:height\" content=\"270\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Karin Skapski (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Karin Skapski (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\"},\"author\":{\"name\":\"Karin Skapski (Alumni)\",\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43\"},\"headline\":\"How To: Change the Color in the Sharepoint Online Modern Experience\",\"datePublished\":\"2017-04-14T12:50:53+00:00\",\"dateModified\":\"2023-02-23T23:41:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\"},\"wordCount\":758,\"publisher\":{\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43\"},\"image\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png\",\"keywords\":[\"sharepoint\",\"sharepoint online\",\"SPO\",\"technology\",\"tips and tricks\"],\"articleSection\":[\"How To\",\"Microsoft\",\"SharePoint\"],\"inLanguage\":\"en-CA\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\",\"url\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\",\"name\":\"How To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/karin\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png\",\"datePublished\":\"2017-04-14T12:50:53+00:00\",\"dateModified\":\"2023-02-23T23:41:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#breadcrumb\"},\"inLanguage\":\"en-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-CA\",\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage\",\"url\":\"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png\",\"contentUrl\":\"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png\",\"width\":1347,\"height\":270},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Karin Skapski's Blog\",\"item\":\"https:\/\/regroove.ca\/karin\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To: Change the Color in the Sharepoint Online Modern Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/karin\/#website\",\"url\":\"https:\/\/regroove.ca\/karin\/\",\"name\":\"Karin Skapski\",\"description\":\"Modern workplace technology and productivity insights.\",\"publisher\":{\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/karin\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43\",\"name\":\"Karin Skapski (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-CA\",\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a90333ec7bb16f7f8ba9981700b10933?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a90333ec7bb16f7f8ba9981700b10933?s=96&d=mm&r=g\",\"caption\":\"Karin Skapski (Alumni)\"},\"logo\":{\"@id\":\"https:\/\/regroove.ca\/karin\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/regroove.ca\/karin\/author\/kskapski\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/","og_locale":"en_US","og_type":"article","og_title":"How To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski","og_description":"2018 Note: A lot has changed in the SharePoint Online modern experience since I wrote this post a year ago. Though some of this information may still help you, there are now better ways to brand modern sites; this post by Corrie Haffly is a great resource, as well as this video from Yaroslav Pentsarskyy. I’d love if …","og_url":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/","og_site_name":"Karin Skapski","article_published_time":"2017-04-14T12:50:53+00:00","article_modified_time":"2023-02-23T23:41:14+00:00","og_image":[{"width":1347,"height":270,"url":"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png","type":"image\/png"}],"author":"Karin Skapski (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Karin Skapski (Alumni)","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#article","isPartOf":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/"},"author":{"name":"Karin Skapski (Alumni)","@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43"},"headline":"How To: Change the Color in the Sharepoint Online Modern Experience","datePublished":"2017-04-14T12:50:53+00:00","dateModified":"2023-02-23T23:41:14+00:00","mainEntityOfPage":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/"},"wordCount":758,"publisher":{"@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43"},"image":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png","keywords":["sharepoint","sharepoint online","SPO","technology","tips and tricks"],"articleSection":["How To","Microsoft","SharePoint"],"inLanguage":"en-CA"},{"@type":"WebPage","@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/","url":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/","name":"How To: Change the Color in the Sharepoint Online Modern Experience - Karin Skapski","isPartOf":{"@id":"https:\/\/regroove.ca\/karin\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage"},"image":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png","datePublished":"2017-04-14T12:50:53+00:00","dateModified":"2023-02-23T23:41:14+00:00","breadcrumb":{"@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#breadcrumb"},"inLanguage":"en-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-CA","@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#primaryimage","url":"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png","contentUrl":"https:\/\/regroove.ca\/karin\/wp-content\/uploads\/sites\/4\/2017\/04\/SharePoint-Custom-UI-Color-1.png","width":1347,"height":270},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/karin\/change-color-spo-modern-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Karin Skapski's Blog","item":"https:\/\/regroove.ca\/karin\/"},{"@type":"ListItem","position":2,"name":"How To: Change the Color in the Sharepoint Online Modern Experience"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/karin\/#website","url":"https:\/\/regroove.ca\/karin\/","name":"Karin Skapski","description":"Modern workplace technology and productivity insights.","publisher":{"@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/karin\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/c23adfde46a8fa2ce372e3dda6b15f43","name":"Karin Skapski (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-CA","@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a90333ec7bb16f7f8ba9981700b10933?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a90333ec7bb16f7f8ba9981700b10933?s=96&d=mm&r=g","caption":"Karin Skapski (Alumni)"},"logo":{"@id":"https:\/\/regroove.ca\/karin\/#\/schema\/person\/image\/"},"url":"https:\/\/regroove.ca\/karin\/author\/kskapski\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/posts\/516"}],"collection":[{"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/comments?post=516"}],"version-history":[{"count":1,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/posts\/516\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/posts\/516\/revisions\/1117"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/media?parent=516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/categories?post=516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/karin\/wp-json\/wp\/v2\/tags?post=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}