Skip to content

Dim the Internet (Brightness Control / Darken) by hawkwinter

Screenshot of Dim the Internet (Brightness Control / Darken)

Details

Authorhawkwinter

LicenseCC-BY-SA-4.0

CategoryEverything

Created

Updated

Size1.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A configurable brightness setting for your browser. Good for multiple monitors / windows, dimming the ones you're not using more than the default dimmer you set for everything else.

Should apply to all websites.

Simple

Notes

Note: --basedark should be a % value from 0% (No Fade) to 100% (Black Screen) (I set my main to 40% when I run it (at night usually) - if you set it to 100%, you wont be able to see anything - dont set it that high), while --fadedark should be a decimal value from 0 to 1 (I set it to 0.7, if you set it to 1, any window your mouse isnt over will be black.).

Source code

/* ==UserStyle==
@name           Darken the Internet
@namespace      Hawkwinter
@version        1.0.0
@description    A configurable brightness setting for your browser. Good for multiple monitors /
windows, dimming the ones you’re not using more than the default dimmer you set for everything else.
Should apply to all websites. Simple
@notes          --basedark should be a % value from 0% (No Fade) to 100% (Black Screen) (I set my
main to 40% when I run it (at night usually) - if you set it to 100%, you wont be able to see
anything - dont set it that high), while --fadedark should be a decimal value from 0 to 1 (I set it
to 0.7, if you set it to 1, any window your mouse isnt over will be black.).
@author         Hawkwinter
==/UserStyle== */

@-moz-document regexp("(chrome|brave)(\\-extension)?://.*"), regexp("about:.*"), regexp("https?://.*"), regexp("s?ftps?://.*") {
/*Settings*/
:root {
	--transitionshort: .5s ease-in-out;
	--basedark: 40%;
	--fadedark: 0.70;
}
}

@-moz-document regexp("(chrome|brave)(\\-extension)?://.*"), regexp("about:.*"), regexp("https?://.*"), regexp("s?ftps?://.*") {
/*Implementation*/
body::after {
    transition: all var(--transitionshort);
	transition-delay: 0.25s;
	content: " ";
	width: 300vmax;
	height: 300vmax;
	min-width: 5760px;
	min-height: 5760px;
	left: -100vmax;
	top:-100vmax;
	overflow: hidden;
	position: fixed;
	background-color: rgba(0,0,0,0);
	z-index: 9999999999;
	pointer-events: none;
}

body:not(:hover)::after {
    transition: all var(--transitionshort);
	transition-delay: 0.75s;
	background-color: rgba(0,0,0,calc(var(--basedark) + (calc(100% - var(--basedark)) * var(--fadedark))));
	opacity: 1;
}

body:hover::after {
    transition: all var(--transitionshort);
	transition-delay: 0.1s;
	background-color: rgba(0,0,0,var(--basedark));
	opacity: 1;
}
}

Reviews

No reviews yet.