How to Change Hyperlink Colors in SharePoint Online Themes
Question details
Users need to modify the default blue, purple, and red colors for normal, visited, and active hyperlink states in SharePoint Online modern custom themes, specifically for custom SPFx solutions.
- Product
- SharePoint Online
- Device & OS
- not provided
- Scenario
- Applying custom color themes to modern SharePoint communication or team sites and ensuring custom SPFx web parts match the site's aesthetic.
- Observed behavior
- Custom themes fail to change standard hyperlink states, leaving them default colors, and custom SPFx anchor tags do not inherit the expected theme colors from the JSON palette.
Ensure you have Site Administrator permissions to apply custom themes in SharePoint Online and access to your SPFx project's source code if you are customizing specific web parts.
Configure Theme Colors Using Fluent UI Theme Designer
Use the official Microsoft tool to generate a comprehensive theme palette that properly applies text and primary colors across supported interface elements.
Modern SharePoint themes do not provide direct JSON palette properties for every specific hyperlink state. Instead, they derive these colors from primary theme settings.
Navigate to the Fluent UI Theme Designer at https://aka.ms/themedesigner in your web browser.
Adjust the 'Primary color' and 'Text color' to match your branding requirements. These settings will influence how links are rendered in supported modern site elements.
Export the generated theme as a JSON file or PowerShell script, then deploy it to your SharePoint Online environment using the SharePoint Online Management Shell.
Style Custom SPFx Links with Scoped CSS
Apply explicit styling when standard anchor tags in custom SPFx web parts fail to inherit the SharePoint site's theme colors.
Boost Your Productivity with WPS Office
While SharePoint handles complex intranet and web part development, WPS Office provides a lightweight, highly compatible, and free desktop suite for all your daily document creation needs. Enjoy a familiar interface and seamless migration without the expensive subscription costs.
- 1. Download the Installer: Visit the official WPS Office website and download the free installation package.
- 2. Install WPS Office: Run the installer and follow the on-screen prompts to set up the software on your computer.
- 3. Open Your Documents: Launch WPS Office and open your existing Microsoft Office files with full layout and format preservation.
Frequently Asked Questions
Why do hyperlinks remain blue even after applying a SharePoint JSON theme?
Modern SharePoint themes do not expose explicit JSON palette properties for normal, visited, and active hyperlink states. Hyperlinks in certain contexts will default to standard browser colors unless properly scoped by the Fluent UI framework.
Can I force my custom SPFx anchor tags to use the site's theme color?
Yes, but standard <a> tags do not inherit these automatically. You must either use Fluent UI Link components, apply SharePoint theme classes manually, or write scoped CSS targeting those tags in your SPFx project.
Does the Fluent UI Theme Designer work for Communication sites?
Yes, themes generated via the Fluent UI Theme Designer can be applied to both modern Team sites and Communication sites using the SharePoint Online Management Shell.
