https://github.com/insidegui/DarkImagePublishPlugin

Publish plugin that lets you have both light and dark mode variants for images on your site 😎
https://github.com/insidegui/DarkImagePublishPlugin

publish-plugin

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/insidegui/DarkImagePublishPlugin
• Owner: insidegui
• License: bsd-2-clause
• Created: 2020-02-26T16:04:37.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-05T17:52:26.000Z (over 2 years ago)
• Last Synced: 2024-07-13T01:02:29.486Z (2 months ago)
• Topics: publish-plugin
• Language: Swift
• Size: 565 KB
• Stars: 50
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-publish - Dark Image

README

        
# 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](./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](/assets/img/2/1.png)

```

Becomes this in HTML:

```html

	

		

		

	

```

## 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](/assets/img/2/1.png?nodark)

```

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

```html

	

		

	

```