Is there a 'static' way to choose one image or another according to the dark mode?-CodePudding

I have a very simple static site, written in HTML and CSS style rules. A simplified form of the HTML code is:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My title</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <h1>My static site</h1>

    <p>This is a simplified example for my static site.</p>

    <p>I don't use PHP, JavaScript, or any other programming language</p>

    <img style="width: 40%;" src="image.png" />

</body>

The fact is that, from CSS using prefers-color-scheme: dark I configure some rules in case the user has dark mode configured. I do it like this:

body {
    color: #000;
    background-color: #fff;
    font-family: monospace;
    max-width: 130ex;
    margin-left:auto;
    margin-right:auto;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #fff;
        background-color: #000;
    }
}

As you can see, the content is very very simple. I usually try to place the images using transparencies so that they look good in both light and dark mode.

However, I can't do this with many images and they become hopelessly illegible in some of the ways. In these cases I can make a clone of the image as in the following example:

<img style="width: 40%;" src="image.png" />
<img style="width: 40%;" src="dark-image.png" />

Is there a way to know, without using programming languages or cookies (maybe in CSS?) to tell the code which image to use?

Is there any other way than this to "darken" an image in CSS in case we find ourselves in dark mode?

Or maybe it's impossible and I must to implement a javascript script for it?

CodePudding user response：

Yes, you can add a class to the images and then target them with media queries:

.only-on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .only-on-dark {
    display: block;
  }
  
  .only-on-light {
    display: none;
  }
}

<img  src="//via.placeholder.com/200/000000/ffffff" />
<img  src="//via.placeholder.com/200/ffffff/000000" />

CodePudding user response：

If you use img you could add a class to it and toggle the display depending on the prefer-color-scheme.

If you use a background-color, you could set a different background inside the media.

@media (prefers-color-scheme: dark) {
  .light {
    display: none;
  }
  .bg-container {
    background-image: url("https://placekitten.com/200/200");
  }
}

@media (prefers-color-scheme: light) {
  .dark {
    display: none;
  }
  .bg-container {
    background-image: url("https://via.placeholder.com/200x200");
  }
}

.bg-container {
  width: 200px;
  height: 200px;
}

div {
  display: inline-block;
}

<img src="https://placekitten.com/200/200" alt="" >
<img src="https://via.placeholder.com/200x200" alt="" >

<div ></div>

CodePudding user response：

Here is an alternative way to solve your issue using the <picture> tag in html with some inline media queries.

The first two <source> tags change the image based on the given media. The bottom img is the default image that works outside the given media.

This system can also change the image with different screen sizes. You can try this by changing the media to respond to screen width, for example, media="(max-width: 600px)":

<picture>
  <!-- User prefers light mode: -->
  <source srcset="light-image.jpg" media="(prefers-color-scheme: light)"/>

  <!-- User prefers dark mode: -->
  <source srcset="dark-image.jpg"  media="(prefers-color-scheme: dark)"/>

  <!-- User has no preference: -->
  <!-- ( I use the light image here, it could be dark as well ) -->
  <img src="light-image.png" />
</picture>

CodePudding user response：

Although the excellent answers above perfectly answer the problem (and solve it), I would like to add, for whom it may be useful, another possible solution that I have found investigating the problem, just as an addition.

The solution is given taking into account that what I do is to make a copy of the image by inverting the colors (this cannot be done in all, in many inverting the color is desirable). In such a way that I get two images, one dark and one light.

But, why invest it in another image and not invest it in CSS in case we find ourselves in dark mode?

We can do this with:

<img  src="image.png"/>

And adding to prefers-color-scheme: dark:

.color-invertible {
  filter: invert(100%);
}

In this way we would only have one image, and we will indicate through its class the images that can be inverted in dark mode and those that cannot.