How do I control the color of links - including their hover color?
Regards
Leif
Document Details
⚠Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.
- ID: 4c5279de-43c1-3a83-83ce-c1b34d25287d
- Version Independent ID: 7cda1751-170a-7bbd-6d71-33daf5168f68
- Content: SharePoint site theming
- Content Source: docs/declarative-customization/site-theming/sharepoint-site-theming-overview.md
- Product: sharepoint
- GitHub Login: @spdevdocs
- Microsoft Alias: spdevdocs
Leif-Frederiksen
All 6 comments
if you mean a HTML link you can use CSS to style it:
CSS
the following code changes all link colors
a {
color: hotpink;
}
dylanwe
on 25 Jul 2018
No, this question is in the context of the Modern Theming: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview
What entry in the palette is used for the links on a page?
Leif-Frederiksen
on 25 Jul 2018
@StfBauer by chance do you know?
andrewconnell
on 9 Jul 2019
@Leif-Frederiksen TLDR: You cannot control the link color or hover state for hyperlinks in modern themes.
These are automatically generated by the theming engine and use the "Primary Color" as the link color and a slightly darkened color for the hover effect. There is also no API that allows you to change this.
You also need to consider with the colored background sections on Office 365 these link colors need to be adopted there automatically to have high contrast with the background.
In case your display in Windows is set to High Contrast the theme again automatically adapts itself to recalibrate to the correct color for accessibility reasons.
From a branding perspective, most companies use the same primary branding colors for links too so in this case theming does a good job.
If you like to see what theme slots are in general in use I created a reference chart based on the default blue theme provided by Microsoft.
Color code: #0078d4
Theme slot name: #0078d4
If you want to see all the colors used for a particular theme I created a web part named Panthema that you can add to any of your sites on Office 365.
StfBauer
on 2 Oct 2019
Hi Stefan,
Thanks for the info - and for the greate reference chart. Nice work :-)
Regards
Leif
Den ons. 2. okt. 2019 kl. 00.15 skrev Stefan Bauer <[email protected]
:
@Leif-Frederiksen https://github.com/Leif-Frederiksen TLDR: You cannot
control the link color or hover state for hyperlinks in modern themes.These are automatically generated by the theming engine and use the
"Primary Color" as the link color and a slightly darkened color for the
hover effect.You also need to consider with the colored background sections on Office
365 these link colors need to be adopted there automatically to have high
contrast with the background.In case your display in Windows is set to High Contrast the theme again
automatically adapts itself to recalibrate to the correct color for
accessibility reasons.From a branding perspective, most companies use the same primary branding
colors for links too so in this case theming does a good job.If you like to see what theme slots are in general in use I created a reference
chart https://n8design.github.io/spfx-uifabric-themes/sass/ouif.theme/
based on the default blue theme provided by Microsoft.Color code: #0078d4
Theme slot name: #0078d4If you want to see all the colors used for a particular theme I created a
web part named Panthema https://github.com/n8design/panthema that you
can add to any of your sites on Office 365.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-docs/issues/2279?email_source=notifications&email_token=AGABXNN73ZTQW6PQHCDPFQLQMPDXXA5CNFSM4FL7XD3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAC53SQ#issuecomment-537255370,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGABXNJJRRIVAA44TVSNR6DQMPDXXANCNFSM4FL7XD3A
.
Leif-Frederiksen
on 2 Oct 2019
Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues
msft-github-bot
on 27 Jan 2020
Related issues
SteIvanov
·
3Comments
karishmaTCS
·
3Comments
christianbueschi
·
3Comments
StfBauer
·
3Comments
zerovectorspace
·
3Comments
Most helpful comment
@Leif-Frederiksen TLDR: You cannot control the link color or hover state for hyperlinks in modern themes.
These are automatically generated by the theming engine and use the "Primary Color" as the link color and a slightly darkened color for the hover effect. There is also no API that allows you to change this.
You also need to consider with the colored background sections on Office 365 these link colors need to be adopted there automatically to have high contrast with the background.
In case your display in Windows is set to High Contrast the theme again automatically adapts itself to recalibrate to the correct color for accessibility reasons.
From a branding perspective, most companies use the same primary branding colors for links too so in this case theming does a good job.
If you like to see what theme slots are in general in use I created a reference chart based on the default blue theme provided by Microsoft.
Color code: #0078d4
Theme slot name: #0078d4
If you want to see all the colors used for a particular theme I created a web part named Panthema that you can add to any of your sites on Office 365.