A Tampermonkey userscript that changes the YouTube red color to green. It recolors the YouTube logo, the progress bar, the Subscribe/Like buttons, the "LIVE" badges and the notification dot, and adds clean green borders around the video player, the Shorts player and the search bar.
YouTube's interface is full of red — the logo, the video progress bar, the watched-progress bar on thumbnails, the live indicators. YouTube gives you a dark mode, but no way to change the accent color. Browser dark-mode extensions don't touch the red either.
This userscript replaces all of YouTube's red with a green gradient using pure CSS injected by Tampermonkey, so the change is instant, reversible (just toggle the script off), and survives YouTube's updates for as long as the class names hold.
- Recolor the YouTube logo green (main logo + Shorts logo) using an SVG gradient
- Green YouTube progress bar in the player, including the scrubber/playhead dot
- Green Shorts progress bar and playhead
- Green page loading bar at the top
- Green "already watched" bar on thumbnails / recommendations
- Green LIVE badges, avatar live ring, and green notification badge
- Green click ripple on every button, and like/dislike icons turn green while pressed
- Green borders around the video player (auto-hidden in fullscreen), the Shorts player, the search bar, the mic and search buttons, and all action buttons
- One-variable customization — change the whole theme color in a single line
- Install the Tampermonkey browser extension (works on Chrome, Firefox, Edge, Brave, Opera).
- On Chrome, enable Developer mode in
chrome://extensions— Tampermonkey userscripts won't run without it. - Open the Tampermonkey dashboard → Create a new script.
- Delete the template, paste the full contents of
src/youtube-theme.user.js, then press Ctrl + S to save. - Reload YouTube. Done.
All the styling is controlled by three variables at the top of src/youtube-theme.user.js:
| Variable | What it controls |
|---|---|
C1, C2 |
The two gradient colors (dark → bright). Set both to the same value for a solid color. |
GRAD |
Gradient direction (90deg = left→right, 0deg = bottom→top, 45deg = diagonal). |
BORDER |
Thickness of every green border (e.g. 1px, 2px). |
Make it solid green instead of a gradient:
const C1 = '#0cb309', C2 = '#0cb309';Use a different color (e.g. purple):
const C1 = '#6a0dad', C2 = '#b14dff';Thicker borders:
const BORDER = '3px';- This works on the desktop website (
www.youtube.com). It does not work in the YouTube mobile app (userscripts are browser-only). - A few selectors depend on
aria-labels (provided in French + English). If YouTube renames its CSS classes, some elements may turn red again — re-inspect the element and add the new class.