Image blend

Author: kepano

Minimal.css

@@ -3716,7 +3716,7 @@ body.minimal-focus-mode.show-view-header .view-content {
 }
 
 /* Invert  */
-div[src$="#multiply"],
+div[src$="#blend"],
 div[src$="#invert"] {
   background-color: var(--background-primary);
 }
@@ -3727,22 +3727,28 @@ div[src$="#invert"] {
   filter: invert(1) hue-rotate(180deg);
   mix-blend-mode: screen;
 }
-.theme-dark img[src$="#multiply"],
-.theme-dark div[src$="#multiply"] img,
-.theme-dark span[src$="#multiply"] img {
+.theme-dark img[src$="#blend"],
+.theme-dark div[src$="#blend"] img,
+.theme-dark span[src$="#blend"] img {
+  mix-blend-mode: screen;
+}
+.theme-dark .img-blend {
   mix-blend-mode: screen;
 }
 
-.theme-light img[src$="#multiply"],
-.theme-light div[src$="#multiply"] img,
-.theme-light span[src$="#multiply"] img {
+.theme-light img[src$="#blend"],
+.theme-light div[src$="#blend"] img,
+.theme-light span[src$="#blend"] img {
   mix-blend-mode: multiply;
 }
 .theme-light img[src$="#invertW"],
 .theme-light div[src$="#invertW"] img,
 .theme-light span[src$=invertW] img {
   filter: invert(1) hue-rotate(180deg);
 }
+.theme-light .img-blend {
+  mix-blend-mode: multiply;
+}
 
 /* Circle */
 img[src$="#circle"]:not(.emoji),

docs/Block types/Images.md

@@ -1,50 +1,52 @@
----
-permalink: images
-aliases:
-  - Image filters
-cssclasses:
-  - table-col-1-150
----
-
-#blocks
-
-## Image-related features
-
-Settings in [[Minimal Theme Settings]]:
-
-- [[Block width]] allows you to control the width of image blocks in a note
-- [[Image grids]] allow for multi-column image layouts
-- **Maximize media** allows images to always fill the width of the line
-
-Settings in [[Style Settings]]:
-
-- [[Image zoom]] allows you to click and hold an image to zoom in
-
-## Image filters
-
-Image filters can be added to create the following effects. Use them by adding the filter name at the end of the image link, e.g. `![[image.jpeg#invert]]`
-
-| Filter     | Description                                                                        |
-|:---------- |:---------------------------------------------------------------------------------- |
-| `#invert`  | Invert images in dark mode — ideal for charts and handwriting on light backgrounds |
-| `#invertW` | Invert images in light mode — ideal for charts and handwriting on dark backgrounds |
-| `#circle`  | Crop image to a circle                                                             |
-| `#outline` | Add outline around image                                                           | 
-
-## Hotkeys
-
-Use [[Hotkeys]] to adjust images globally:
-
-- Toggle [[image grids]] globally
-- Cycle through image width options
-
-## Helper classes
-
-Use [[Helper classes]] to control image grids on a note
-
-| Class      | Description                              |
-| ---------- | ---------------------------------------- |
-| `img-grid` | Sets image layout to grid mode           |
-| `img-100`  | Image blocks fill 100% of the pane width |
-| `img-max`  | Image blocks fill the max line width     |
-| `img-wide` | Image blocks fill the wide line width    | 
+---
+permalink: images
+aliases:
+  - Image filters
+cssclasses:
+  - table-col-1-150
+---
+
+#blocks
+
+## Image-related features
+
+Settings in [[Minimal Theme Settings]]:
+
+- [[Block width]] allows you to control the width of image blocks in a note
+- [[Image grids]] allow for multi-column image layouts
+- **Maximize media** allows images to always fill the width of the line
+
+Settings in [[Style Settings]]:
+
+- [[Image zoom]] allows you to click and hold an image to zoom in
+
+## Image filters
+
+Image filters can be added to create the following effects. Use them by adding the filter name at the end of the image link, e.g. `![[image.jpeg#invert]]`
+
+| Filter     | Description                                                                        |
+|:---------- |:---------------------------------------------------------------------------------- |
+| `#blend`   | Blend image into background                                                        |
+| `#circle`  | Crop image to a circle                                                             |
+| `#invert`  | Invert images in dark mode — ideal for charts and handwriting on light backgrounds |
+| `#invertW` | Invert images in light mode — ideal for charts and handwriting on dark backgrounds |
+| `#outline` | Add outline around image                                                           | 
+
+## Hotkeys
+
+Use [[Hotkeys]] to adjust images globally:
+
+- Toggle [[image grids]] globally
+- Cycle through image width options
+
+## Helper classes
+
+Use [[Helper classes]] to control image grids on a note
+
+| Class       | Description                              |
+| ----------- | ---------------------------------------- |
+| `img-blend` | Sets all images to blend with background |
+| `img-grid`  | Sets image layout to grid mode           |
+| `img-100`.  | Image blocks fill 100% of the pane width |
+| `img-max`   | Image blocks fill the max line width     |
+| `img-wide`  | Image blocks fill the wide line width    | 

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Minimal",
-	"version": "7.7.14",
+	"version": "7.7.15",
 	"minAppVersion": "1.6.1",
 	"author": "@kepano",
 	"authorUrl": "https://twitter.com/kepano",

src/css/main.css

@@ -34,7 +34,7 @@
 /* Invert  */
 
 // Necessary to set background for screen/multiply to work
-div[src$="#multiply"],
+div[src$="#blend"],
 div[src$="#invert"] {
 	background-color: var(--background-primary);
 }
@@ -46,24 +46,30 @@ div[src$="#invert"] {
 		filter: invert(1) hue-rotate(180deg);
 		mix-blend-mode: screen;
 	}
-	img[src$="#multiply"],
-	div[src$="#multiply"] img,
-	span[src$="#multiply"] img {
+	img[src$="#blend"],
+	div[src$="#blend"] img,
+	span[src$="#blend"] img {
+		mix-blend-mode: screen;
+	}
+	.img-blend {
 		mix-blend-mode: screen;
 	}
 }
 
 .theme-light {
-	img[src$="#multiply"],
-	div[src$="#multiply"] img,
-	span[src$="#multiply"] img {
+	img[src$="#blend"],
+	div[src$="#blend"] img,
+	span[src$="#blend"] img {
 		mix-blend-mode: multiply;
 	}
 	img[src$="#invertW"],
 	div[src$="#invertW"] img,
 	span[src$="invertW"] img {
 		filter: invert(1) hue-rotate(180deg);
 	}
+	.img-blend {
+		mix-blend-mode: multiply;
+	}
 }
 
 /* Circle */