https://github.com/0qln/obsidian-image-darkmodifier
Turn your inline images into darkmode.
https://github.com/0qln/obsidian-image-darkmodifier
darkmode-style image-processing obsidian obsidian-plugin
Last synced: about 2 months ago
JSON representation
Turn your inline images into darkmode.
- Host: GitHub
- URL: https://github.com/0qln/obsidian-image-darkmodifier
- Owner: 0qln
- License: mit
- Created: 2025-06-19T17:21:34.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2026-01-31T13:49:01.000Z (5 months ago)
- Last Synced: 2026-02-01T01:08:12.410Z (5 months ago)
- Topics: darkmode-style, image-processing, obsidian, obsidian-plugin
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Darkmodifier
Obsidian Plugin.
Apply filters, such as darkmode effects (with transparency), to your markdown image links.
This is what it might look like:
No filter:
With `@darkmode` filter:
## How to use this?
1. Add the plugin
2. Just add the filters to the alias part of your image link:
```md
Normal embed:
`![[image.png|image-description]]`
Embed with darkmode:
`![[image.png|image-description @darkmode]]`
Where darkmode is essentially just a shorthand for this:
`![[image.png|image-description @invert @transparent(threshold="rgb((13, 13, 13))", remove="below") @boost-lightness(amount=1.2)]]`
```
The filter are applied in order left to right.
## Filter Syntax
will look like this for most cases:
```
@filter-name(boolean-param, int-param=42, float-param=-6.9, string-param="text-value")
```
For string values, the following characters have to be written in a special way:
- `"` => `""`
- `(` => `((`
- `)` => `))`
Backslashes are not allowed. (Due to how the image-alt is parsed by obsidian.)
## Link support
All kind's of link notation are supported:
```md
![[image.png | image-description @darkmode]]
```
```md
```
```md
```
You can even use image links to remote images:
```md
```
*(Note that this requires a network request to fetch the image data.)*
## The following filters can be used:
### Darkmode
Reccomended for use on images with white backgrounds (e.g. screenshots of diagrams in papers).
name: `@darkmode`
params: none.
#### Default Behavior
By default, always applies dark mode adjustments: inverts the image, removes the background, and boosts the lightness by 1.2.
Essentially just a shorthand for: `@invert @transparent(threshold="rgb((13, 13, 13))", remove="below") @boost-lightness(amount=1.2)`.
#### Theme Aware Mode
You can enable **Theme Aware Mode** in the plugin settings. When enabled, the `@darkmode` filter automatically adapts to Obsidian's current theme:
**In Dark Theme:**
- Inverts colors
- Removes dark backgrounds (below threshold)
- Boosts lightness by 1.2x
**In Light Theme:**
- Keeps original colors (no inversion)
- Removes bright backgrounds (above threshold ~240)
- Reduces lightness by 0.85x to increase contrast
Images will automatically re-render when you switch between light and dark themes.
### Invert
Inverts the image.
name: `@invert`
params: none.
### Lightness boost
Converts the image pixel representation to hsl, and boosts the lightness.
name: `@boost-lightness`
params:
- `amount`:
- float-value: the amount by which to boost the lightness.
#### Transparency
Make pixels below or above a certain threshold transparent.
name: `@transparent`
params:
- `remove`:
- string-value: can be either `"above"` or `"below"`
- if `"above"`: removes pixels above the threshold
- if `"below"`: removes pixels below the threshold
- `threshold`: all pixels that have `r`, `g` and `b` channels above or below this threshold will be made transparent.
- int-value: compare all channels to the same threshold
- string-value: can be any css-parsable string. e.g. `"rgb((69, 42, 3))"` or `"hsl((35deg, 91.7%, 14.1%))"` would have the same effect:
## Contributing
### Filters
Feel free to open pullrequests or issues. Adding new filters is really straight forward, you can use existing filters for reference.
### Mobile support
I don't use Obsidian Mobile myself, so if you want mobile support, feel free to open a PR.
## Compatibility
-  Plugin will use the current image as you see it in Obsidian
- Theme Detection respects  Plugin and any Themes such as  that support it
Known issues:
- none so far