A userstyle that allows you to manually dim the brightness of videos on Twitch and YouTube.
Twitch & YouTube Dimmer by philg-dev
Details
Authorphilg-dev
LicenseMIT License
CategoryTwitch; YouTube
Created
Updated
Size821 B
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
To dim the brightness, use the Stylus Toolbar button, select the cogwheel icon for the Twitch & YouTube Dimmer style and change the brightness slider.
This should work in Picture-in-Picture mode in all major browsers except for Firefox.
Unfortunately Firefox doesn't support the :picture-in-picture CSS pseudo-element.
If you experience any issues with the userstyle, let me know through the "issues" section on GitHub
Source code
/* ==UserStyle==
@name Twitch & YouTube Dimmer
@namespace philg-dev
@version 1.0.0
@description A userstyle that allows you to dynamically dim the brightness of videos on Twitch and YouTube.
@author philg-dev
@preprocessor default
@var range mybrightness "Brightness Level" [100, 5, 100, 1, "%"]
==/UserStyle== */
@-moz-document domain("twitch.tv"), domain("youtube.com") {
/*
Note: this doesn't work in Firefox, since Firefox does not implement
the PiP API unfortunately.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture#browser_compatibility
*/
:picture-in-picture {
filter: brightness(var(--mybrightness))
}
video {
filter: brightness(var(--mybrightness))
}
}