Change background's alpha value based on screen brightness

Question

I want to change the brightness of my background image based on the user's screen brightness. Let me demonstrate this with a simple example.

For example, let these be my html and css files:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content{
    width: 50%;
}

.content h1{
    color: #fff;
    text-align: center;
    font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <div class="content">
            <h1>My Test Text!</h1>
        </div>
    </div>
</body>
</html>

The result is good only when the user's screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.

So is there any way to change the alpha value of the background based on the user's screen brightness? Any help would be appreciated.

The colors do get bright based on the brightness. Do you mean based on the background's brightness? — Mr_Green, Feb 19 '21 at 07:25
@Mr_Green I want the background's opacity to be adjusted according to the screen's brightness (higher the brightness, higher the alpha value). Unfortunately, the answers that i got so far have stated that this is not possible. — Sushil, Feb 19 '21 at 07:31
every color gets set automatically as per the brightness. If you are doing changes against it then it is bad for general user accessibility. Anyway, if you want to do changes, it can't be done from these technologies but have to be more core ones like .Net for windows (Desktop app). I don't recommend doing such a thing though. — Mr_Green, Feb 19 '21 at 07:48

score 5 · Accepted Answer · edited Feb 19 '21 at 20:29

5

There is no media query for detecting brightness. See all media-queries

There is no JS way of doing it as well. See another question

It doesn't make sense to me, if I change the brightness on my monitor the PC doesn't know about it. Therefore you cannot achieve this.

The least you can do is switch between dark and light theme using the media queries, but it is not what you want to achieve, I think.

For the text you can try to add text-shadow. It may help to see the text better.

edited Feb 19 '21 at 20:29

marc_s

732,580
175
1,330
1,459

answered Feb 19 '21 at 07:18

Andris Jefimovs

689
6
17

Ok...Can we expect `js` to add the feature of finding the screen brightness in the future ;) – Sushil Feb 19 '21 at 07:42
2

I don't think so. As I said, the computer doesn't know what settings you have on your monitor. There was an attempt from Firefox, but the feature got removed completely. [See MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/mozBrightness) – Andris Jefimovs Feb 19 '21 at 07:46
1

Ok then thanks! The `text-shadow` thing was helpful tho. – Sushil Feb 19 '21 at 07:49

score 0 · Answer 2 · answered Feb 19 '21 at 07:53

0

There is filter properties brightness method which let you relatively change as per screen brightness. Technically, the brightness is still changing as per the screen's but it gives us leverage to increase or decrease as a constant value.

filter: brightness(1.5) (MDN)

answered Feb 19 '21 at 07:53

Mr_Green

40,727
45
159
271

`brightness` is a good choice, but it affects the opacity of the `div`'s children, which is not what i want :( – Sushil Feb 19 '21 at 08:06
In that case, have a separate div (a floating element - position: absolute, z-index: -1) for just showing the background. – Mr_Green Feb 19 '21 at 08:07
1

@Sushil Anyway, I feel the `text-shadow` is the best approach to go here, as the other answer stated. – Mr_Green Feb 19 '21 at 08:09
Even i feel that `text-shadow` is better than `filter: brightness()`. But anyways, thanks for ur help! – Sushil Feb 19 '21 at 08:14

score 0 · Answer 3 · answered Feb 19 '21 at 08:01

There is another good answer about why it's not possible with JavaScript. Meanwhile, I think some additional information could be helpful.

If you can install an application to the client, say a node.js application, you can reach some kind of screen brightness and exposed the value through an API, and get that value from your JavaScript code.

It would be another question to detect the brightness but this could be a good start.

This would be tricky because the solution varies, depends on your target OS, whether it's an external monitor or not etc. For example, WmiMonitorBrightness could be useful for a Windows system.

score -2 · Answer 4 · answered Feb 19 '21 at 07:17

-2

The browsers does not know the monitor information and settings. This is unlikely But you can try this :

#:before{content:'';/*backgroundcodes*/opacity:.15}

answered Feb 19 '21 at 07:17

Murat Can

13
5

Change background's alpha value based on screen brightness

4 Answers4