We have the following modern UI:

enter image description here

Where we are trying to get the below UI, which have the following changes: Button color is different, Font Family is different & Font size/color is different , as follow:

enter image description here

So is this something we can achieve in SharePoint online modern UI? and how?

  • Do you want to change the color & font across all pages/lists on site or for just this one list view? Oct 25, 2021 at 11:06
  • @GaneshSanap across all pages and views
    – John John
    Oct 25, 2021 at 11:08

1 Answer 1


You can achieve this in SharePoint online using below two ways:

  1. SharePoint site theming - recommended:

You can create a custom theme for your SharePoint site & apply custom styles and colors to sites.

Not sure if you will be able to achieve all your requirements (like specific font-size) using custom themes but this is the recommended solution by Microsoft for for applying custom styles to sites.

Check below Microsoft documentations for more information:

  1. Injecting custom CSS using SPFx application customizer - Not recommended:

You can inject custom CSS on SharePoint online modern pages using SPFx application customizer & change the styling of HTML elements using their HTML id's & classes.

Check below reference for more information:

  1. How can I include the same JS and CSS files on multiple SharePoint Modern Page?

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

  • i do not want to inject any custom CSS for the reasons you mentioned.. but can you advice more where i can find examples and documentations on what i can achieve using SharePoint site theming? and how to create these?
    – John John
    Oct 25, 2021 at 12:30
  • Check documentation links in my updated answer above. Oct 25, 2021 at 13:28
  • Please Upvote(^) and accept as an Answer if it helped you in any way. Nov 2, 2021 at 16:49

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.