posthtml-auto-picture-prefers-color-scheme

A PostHTML plugin that finds and adds adjacent dark and light mode sources for images.

Input:

<img src="photo.jpg" />

Output:

<picture>
  <source srcset="photo.light.jpg" media="(prefers-color-scheme: light)" />
  <source srcset="photo.dark.jpg" media="(prefers-color-scheme: dark)" />
  <img src="photo.jpg" alt="" />
</picture>

Install

npm add posthtml posthtml-auto-picture-prefers-color-scheme
pnpm add posthtml posthtml-auto-picture-prefers-color-scheme
yarn add posthtml posthtml-auto-picture-prefers-color-scheme

Usage

import posthtml from "posthtml";
import autoPicturePrefersColorScheme from "posthtml-auto-picture-prefers-color-scheme";

posthtml([
  autoPicturePrefersColorScheme()
])
  .process("<img src='photo.jpg' />")
  .then(result => console.log(result.html));

Result:

<picture>
  <source srcset="photo.light.jpg" media="(prefers-color-scheme: light)" />
  <source srcset="photo.dark.jpg" media="(prefers-color-scheme: dark)" />
  <img src="photo.jpg" alt="" />
</picture>

Options

separator

Type: string
Default: .

When looking for alternatives, text between the final instance of the separator and the file extension is considered.

import posthtml from "posthtml";
import autoPicturePrefersColorScheme from "posthtml-auto-picture-prefers-color-scheme";

posthtml([
  autoPicturePrefersColorScheme({
    "separator": "-",
  })
])
  .process("<img src='photo.jpg' />")
  .then(result => console.log(result.html));

Result:

<picture>
  <source srcset="photo-light.jpg" media="(prefers-color-scheme: light)" />
  <source srcset="photo-dark.jpg" media="(prefers-color-scheme: dark)" />
  <img src="photo.jpg" alt="" />
</picture>

light, dark

Type: string
Default: light, dark

When looking for alternatives, these values are the text to search for between the separator and the extension.

import posthtml from "posthtml";
import autoPicturePrefersColorScheme from "posthtml-auto-picture-prefers-color-scheme";

posthtml([
  autoPicturePrefersColorScheme({
    "light": "day",
    "dark": "night",
  })
])
  .process("<img src='photo.jpg' />")
  .then(result => console.log(result.html));

Result:

<picture>
  <source srcset="photo.day.jpg" media="(prefers-color-scheme: light)" />
  <source srcset="photo.night.jpg" media="(prefers-color-scheme: dark)" />
  <img src="photo.jpg" alt="" />
</picture>

ensureFileExistence

Type: boolean
Default: true

By default, this plugin checks to ensure the files actually exist, because you may have a mix of images that do and don’t have alternatives. If set to false, this will update the HTML without performing that check. This could result in 404 errors if you aren't enforcing their existince some other way.

inputPath

Type: string or (src: string) => string
Default: ./

When ensuring the files exist, the input path is used as the root path to search for those files. When providing a function, the function will recieve the src attribute of the img and should return anything that should precede the existing src string.