https://framer.com/m/GlobalHighLight-cYRETZ.js
Io / Enhancements / GlobalHighlightColor
GlobalHighlightColor
GlobalHighlightColor sets the colour a reader sees when they select text anywhere on the page, so highlighting stays on brand instead of falling back to the browser blue.
Examples
Live specimens for every control the component exposes.
Setup
The component draws nothing. One instance per page sets the selection colour for the whole document — select any text on this page to see it. The specimen here is wired to the primary token, so it follows the theme rather than freezing a literal.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for GlobalHighlightColor
Text selection should carry the brand colour rather than the browser default.
The site is dark and the default highlight is unreadable against it.
The colour must follow the theme — pass a token, not a literal.
You want it site-wide with no CSS to maintain — add it to the layout template.
Reach for something else
Only one block should highlight differently — this is page-wide.
You need to style links or hover states — this only touches selection.
The highlight should animate or react — it is a single static colour.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.