Custom Theme Applicator for SharePoint Online Modern Experience


In most cases you have to customize the modern experience based on your organization's branding or identity. Microsoft has given us a variety of options to do that; we have PowerShell cmdlets, CSOM and REST API. It seems most people prefer to just use PowerShell for this purpose as you get to see most blogs discussing how to create a custom theme using PowerShell. But to me, it's very tedious to work with PowerShell when you are testing different shades of color to use in your custom theme.  I prefer an interface that allows me to click buttons to create or update, retrieve an existing theme and even remove it without working with a set of commands. It's a faster for me :). So to avoid the hassle of working with commands each time I want to test my theme, I decided to develop a SharePoint add-in  using SharePoint theming REST API . You can download the app here in the app.publish folder. Once downloaded, upload the app to your App catalog and it's ready for use! Here is the Source code. It has two interfaces:

Interface 1

It displays the color in the background when you type in hex code. A custom theme is predefined when you lunch the app.


Interface 2

You have this option if you prefer not to work with hex code. Just select the color you want in the color palette box.

Note: Based on my testing, I tried to explain where each color "theme setting" (e.g themePrimary) is used in the modern site, but it's not very comprehensive, and in some cases, I have found that a color theme setting which I thought was controlling a particular component is not actually the one controlling that component. It is probably another theme setting sharing the same hex code. It can be very confusing, and stressful in coming up with perfect shades of color that works well for every components on your modern page, and Microsoft documentation does not have explanation on that. So be sure to test well and confirm the description I have put for each theme setting.

I hope you will find it useful for testing and maintaining you custom themes. Kindly share your experience too on what each theme setting controls on the modern page. 


Comments

  1. In the beginning, I would like to thank you much about this great post. Its very useful and helpful for anyone looking for tips. I like your writing style and I hope you will keep doing this good working.
    Ethical Hacking Course in Chennai
    Certified Ethical Hacking Course in Chennai
    PHP Training in Chennai
    ccna Training in Chennai
    Web Designing Course in Chennai
    ethical hacking course in chennai
    hacking course in chennai

    ReplyDelete
  2. Thanks for sharing this valuable information to our vision. You have posted a worthy blog keep sharing.

    yaoor
    Article submission sites

    ReplyDelete
  3. Amazing blog with the latest information. Your blog helps me to improve myself in many ways. Looking forward for more like this.
    rpa training in chennai

    ReplyDelete
  4. Thanks for sharing this valuable information to our vision. You have posted a worthy blog keep sharing.

    Azure Training in Chennai
    Data Science Training in Chennai
    Tableau Training in Chennai
    Java Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Generate Word Document From A SharePoint List Item Using Microsoft Flow

Calling Microsoft Graph API from an Angular 5 Single Page Application (SPA)

Creating SharePoint Framework Client Web Part and solving the challenges with _RequestDigest Token value using React