DarkImagePublishPlugin

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

DarkImagePublishPlugin

(★ 52)

Publish plugin that lets you have both light and dark mode variants for images on your site 😎

DarkImagePublishPlugin Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# DarkImagePublishPlugin 😎

A plugin for [Publish](https://github.com/JohnSundell/Publish) that lets you have two variants for images on your site: one for light mode, and one for dark mode. This is currently used in [rambo.codes](https://rambo.codes).

![demo](https://raw.githubusercontent.com/insidegui/DarkImagePublishPlugin/master/demo.gif)

## How to use it

Just use the regular markdown syntax for images and the plugin takes care of the rest, so that the following markdown:

```markdown
![some image](https://raw.githubusercontent.com/insidegui/DarkImagePublishPlugin/master/assets/img/2/1.png)
```

Becomes this in HTML:

```html
<figure>
	<picture>
		<source srcset="/assets/img/2/1-dark.png" media="(prefers-color-scheme: dark)">
		<img src="/assets/img/2/1.png" alt="some image">
	</picture>
</figure>
```

## Installing the plugin

To install the plugin, add it to your site's publishing steps:

```swift
try mysite().publish(using: [
    .installPlugin(.darkImage()),
    // ...
])
```

You can customize the suffix that's used for the dark variant by passing the `suffix` parameter:

```swift
try mysite().publish(using: [
    .installPlugin(.darkImage(suffix: "bestmode")),
    // ...
])
```

## Light-only images

In some cases, you might have just a single variant of an image, so trying to load the dark variant would fail. If you have an image with only a single variant, add the `?nodark` suffix to your image's path/URL:

```markdown
![some image](https://raw.githubusercontent.com/insidegui/DarkImagePublishPlugin/master/assets/img/2/1.png)
```

In that case, the generated HTML will look like this:

```html
<figure>
	<picture>
		<img src="/assets/img/2/1.png" alt="some image">
	</picture>
</figure>
```

DarkImagePublishPlugin

DarkImagePublishPlugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

DarkImagePublishPlugin

DarkImagePublishPlugin Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README