Change the Button colors, Font Color & Font Family for our SharePoint online modern UI

Question

We have the following modern UI:

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:

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

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:

• SharePoint site theming
• SharePoint site theming: JSON schema
• SharePoint site theming: PowerShell cmdlets

2. 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.