diff --git a/gatsby-theme-oi-wiki/src/theme/global.js b/gatsby-theme-oi-wiki/src/theme/global.js
index 9dc41d27..94e43e87 100644
--- a/gatsby-theme-oi-wiki/src/theme/global.js
+++ b/gatsby-theme-oi-wiki/src/theme/global.js
@@ -37,6 +37,7 @@ const globalStyles = withStyles((theme) => ({
     },
     img: {
       maxWidth: '100%',
+      filter: 'var(--image-filter)',
     },
     ol: {
       paddingInlineStart: 30,
diff --git a/gatsby-theme-oi-wiki/src/theme/index.js b/gatsby-theme-oi-wiki/src/theme/index.js
index 5b22d64c..1b6dd37e 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.js
+++ b/gatsby-theme-oi-wiki/src/theme/index.js
@@ -66,6 +66,7 @@ const lightCss = {
       '--link-default': hexToRgbaParam('#576ad4'),
       '--link-hover': hexToRgbaParam('#03a9f4'),
       '--highlight-filter': '',
+      '--image-filter': '',
       '--inline-code-color': hexToRgbaParam('#37474f'),
       '--inline-code-background': '236, 236, 236, .5',
       ...applyDefaults(lightColor, ...paletteKeys),
@@ -96,6 +97,7 @@ const darkCss = {
       '--link-default': hexToRgbaParam('#20baff'),
       '--link-hover': hexToRgbaParam('#52ebff'),
       '--highlight-filter': 'invert(98%) hue-rotate(180deg)',
+      '--image-filter': 'brightness(0.8)',
       '--inline-code-color': hexToRgbaParam('#c4c4c4'),
       '--inline-code-background': hexToRgbaParam('#424242'),
       ...applyDefaults(darkColor, ...paletteKeys),