✨ feat: add invertable image shortcode
Useful to invert diagrams, graphs, etc. in dark theme. To use it in a markdown file, add a line like: {{ invertable_image(src="/img.png", alt="alt text") }}
This commit is contained in:
parent
c26c826471
commit
389c724fe0
@ -41,7 +41,6 @@
|
||||
--meta-color: rgb(53, 53, 53);
|
||||
--accent-color: #aacb73;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--bg-0: #818181;
|
||||
--bg-1: rgba(133, 133, 133, 0.5);
|
||||
@ -60,7 +59,12 @@
|
||||
--input-color: #294797;
|
||||
--meta-color: rgb(198, 197, 197);
|
||||
--accent-color: #ff9a8c;
|
||||
|
||||
.invertable-image {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
|
1
templates/shortcodes/invertable_image.html
Normal file
1
templates/shortcodes/invertable_image.html
Normal file
@ -0,0 +1 @@
|
||||
<img class="invertable-image" {% if src %}src="{{ src }}"{% endif %} {% if alt %}alt="{{ alt }}"{% endif %}/>
|
Loading…
x
Reference in New Issue
Block a user