Search code examples
htmlcssgoogle-chrome-extensionyoutube

Change YouTube Thumb Up Color


How can I change the color of the thumbs up SVG on YouTube in Devtools [For Chrome Ext]?

For some reason, it doesn't go with this variable: sass

:root
    *
        --yt-spec-text-primary: #1cae23

YT Thumbs Up Icon White, instead of Green

Here a picture of the HTML of the YouTube Thumbs Up Button

HTML

I want it to be outlined in Green like the dislike button, and also to be filled in with green after the animation.

Like this: Green Filled In

EDIT:

Now it goes from Green for 1 second then back to white?

Green for 1 second

White for the rest

EDIT (2):

Also tried turning off Ambient mode, doesn't affect Like Button.


Solution

  • We can now live in peace.

    I've found the answer to my problem.

    SASS:

    .yt-spec-button-shape-next__icon
        & > yt-icon
            & > yt-animated-icon
                filter: invert(43%) sepia(95%) saturate(702%) hue-rotate(81deg) brightness(97%) contrast(89%)
    

    The final product of the filter