top of page
Rachel H

Branded Theme Palette for SharePoint Online

SPO is not the same as on premise, gone are the dates of cool customization (at least in terms of the methods you may have previously used). It is so locked down and controlled, and it is NOT recommended to modify much outside of this. If you want to design, it tends to be at a small component level. There are small ways to make it more like your own company by adding a palette.

So how can you make your company intranet presence look branded? Well, there is an option available, where you can create your own palette that will reside under "change the look." in your site actions menu. I recommend using this article but try not to get too caught up matching to her visual mock up, as that didn't work well for me, it only confused me further.

What worked for me? I used, the Theme Designer App, which is useful but also lacking in that the visual output only displays 4 values. When you edit in codepen, its also just as lacking. You can't really see how the nit gritty colors impact your theme. If you try to get daring and add extra colors, please be sure you test your system pages. Try different colors and test, test, test. The important colors to add that will allow for branded related background colors are:

"themePrimary" "themeLighterAlt" "neutralLight"

Take advantage the accessibility checker and theme slots. I'd like to say this was a simple task but I also had some other silly issues beyond my struggle to test. If you are used to designing with css, you will probably struggle with this like I did. There were some other issues I had as well:

  1. In the browser I was changing the theme, then I'd click save and go back and change the theme and click save. This was NOT the typical way a user applies themes so I was getting weird results of caching issues. I'd return to change the theme but it was caching after the 2nd change. If I didn't do a hard refresh then the theme SELECTED would display the previously selected theme.

  2. In the console, I ran: window.__themeState__.theme. This returned about a 100 additional variables than the theme generator uses! What an exciting find! But when we tested it, the variables beyond the ones available in the theme generator app, do NOT APPLY. Don't waste your time with this.

  3. The accent color sounds like it'd be great but it does not get applied how you'd expect or want. It is only use on 1 part of the website, as far as I can tell. It is used for the title field as a background color on the hero image. Because the text color is white, you need to be thoughtful in your choice for the accent color. If you don't apply this its a slightly degraded value of the primary color.

I want to give you a positive glowing experience but here is my take away. Your palette might be lacking when you are done. But the good news is that you can also create customized views on your lists through json column / row formatting.


14 views0 comments

Recent Posts

See All

UX to Dev

Comentarios


bottom of page