Color of Highlighted Text - Free

Search

Hooked to Cursor

Countdown Timer

Futuristic Typing

Password Protected

Timed Loading Bar

Attempted Escape

Toggle Between Variants

Timeboxed Message

Track # of Clicks

Controller Changes Variant

Directional Hover

Embed Any Website

Upvote / Downvote

Before & After Slider

Comment Section

Slip N’ Slide

Filtering Without CMS

Replace Cursor with Frame

Continuous Rotation

Download Any File

Stick to Cursor

Image Modal on Click

Attention Shake

Hide Header on Scroll

Countdown to Midnight Daily

CTA Tester (New CTA on Pageload)

Tinder Style Swipe

Color of Highlighted Text

Text Bubble Follows Cursor

Toast Notification

Snap Scroll Effect

Copy Link to Current Page

Randomized Text from List

Scroll Progress Bar

Multi Color Gradient Fill

Rotate to Follow Cursor

Current Time & Date

3D Spin (X-Axis)

Random Gradient

Copy to Clipboard

Random Border Color

Slide Out Right

Share on LinkedIn

Share on Facebook

3D Spin (Y-Axis)

Slide Down & Back

Share on Twitter (X)

Skew & Toggle Fill

Material Ripples

Back

Copy Link

Library

/

Free

/

55

Color of Highlighted Text

55

Color of Highlighted Text

FREE

Not loading? Preview

Made by

@frameroverrides

override

select

Override

Remix & Clone

Color of Highlighted Text

Copy

Override

Copied to Clipboard!

Instructions

Apply to any text layer. Change line 4 of the code to your desired color.

Code Preview

import type { ComponentType } from "react"
import { createGlobalStyle } from "styled-components"

const HIGHLIGHT_COLOR = "#97E025" // change to your preferred color

const GlobalStyle = createGlobalStyle`
  *::selection {
    background: ${HIGHLIGHT_COLOR};
  }
  *::-moz-selection {
    background: ${HIGHLIGHT_COLOR};
  }
`

export function withHighlightColor(Component): ComponentType {
    return (props) => {
        return (
            <>
                <GlobalStyle />
                <Component {...props} />
            </>
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.