I recently built and deployed a new theme to test out. I used the UI Fabric theme designer, added the primary color (a variation of red) and a darker color for text (a variation of charcoal color) and kept the background color as #fff.

I used add-SPOtheme and added the resulting color palette to my site. When testing, I noticed something weird in the page edit mode. When I hover over adding a new web part, the webparts are highlighted with a dark charcoal type color (when hovering the mouse over) which I thought was really weird.

I inspected the element and found the hex for this color. It did not match any of the hex values that were exported by the theme engine. So now I am not sure where this color came from, and why its being used a hover effect.

I reverted to a different theme and different colors apply then, but I wanted to know if there is something wrong with my initial theme color choices which caused this.

The primary color: #c30631

Text color: #383838

Background color: #ffffff

The offending color when I highlight a webpart option in page edit mode: #1f0108

2 Answers 2


I am not sure what exactly "highlight a webpart option in page edit mode" is, and I know it's not an answer, but I've applied your theme to a site and I can't figure out what you consider being weird. These are the screenshots. It all looks fairly good to me.

enter image description here

I also could not find #1f0108 or rgb(31, 1, 8) color used anywhere. Perhaps, you have some customizations added. Maybe an SPFx extension with custom CSS.

Try checking semantic slots on the UI Fabric Theme Designer. If you view page source, can you search for rgb(31, 1, 8) and see if the color is there? Can you see the color that is similar to the one you discovered on the SharePoint site?

enter image description here

  • 1
    Sorry this took quite some time to get back to. But you were correct. There was some glitch at my end. I removed the custom themes, created a new one and pushed it out again, it seemed to work fine after that.
    – Krishant L
    Oct 15, 2019 at 19:18

I assume you are referring to the border color when selecting or hover over a web part.

There are certain slots in Fabric theme designer whose names contains “Hovered”. The color you are looking for may have come from one of these slots.

If you are applying SharePoint Framework customization, you can refer to the link below which might give you a hint.

Reference: Use theme colors in your SharePoint Framework customizations.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.