0

Weird question: Is there any way for me to make the visibility of a Text to react according to the screen brightness? It has to be fairly beginner friendly.

Kratos
  • 1
  • Not sure what you're exactly looking for, are you trying to adjust the text color based on the background brightness? –  Jan 13 '21 at 08:06
  • I don't think screen brightness is within the reach of any Browser. Even if you adjust and see the numerical data displayed on the screen in "NITS", it's a program integrated into the monitor... not sure the monitor would send settings data to the PC at all except sync. – Nex Jan 13 '21 at 08:18
  • I am not sure what is the visibility of a text but detecting screen brightness could be found by body or main page's `l` value of `hsl` which decide color's brightness. – jacobkim Jan 13 '21 at 08:19

1 Answers1

2

Interesting idea but. Unfortunately, JavaScript isn't allowed to get such user data for security reasons.

You can get more info on why that is on the following StackOverflow posts.

  1. how to use javascript to measure how bright a users monitor is (by user 'HankV')
  2. automatically detect how bright a users monitor is (by user 'JasonS')

That being said. (and... Unfortunately, I doubt getting it to work will be beginner-friendly as you have requested. But I will leave my answer here if you ever wanted to have a try at it in the future.)

There might be a way you can get it to work. And if you do get it to work. Only use this for learning purposes.

One method I came across was that there used to be a method of getting how bright the user's screen's backlight is.

screenBrightness = window.screen.mozBrightness;

"it indicates how bright the screen's backlight is, on a scale from 0 (very dim) to 1 (full brightness); this value is a double-precision float."

You can find more info about it here. on MDN docs

A small disclaimer: This feature is deprecated. And is not recommended to use. And most modern browsers might not support it. (Try testing on Firefox)

In this article, I found out that, "In order to use screen.mozBrightness you have to set the preference dom.screenBrightnessProperty.enabled to true in about:config."

And if you can get the device brightness like this. You can use that data to change the text-visibility.

To add to this. There are many other JavaScript Screen API properties you can utilize in future projects. screen.colorDepthfor example. You can find a list of them here.

Thoshitha Kaduruwewa
  • 33
  • 7