feat: new image filter for dark mode

decrease brightness only instead of invert color

https://blog.fsky7.com/archives/46/

BREAKING CHANGE: `darkImage` option is removed

You can delete `darkImage` in config.toml or post’s Front Matter now.

README.md

@@ -164,7 +164,6 @@ motto | author’s description | string, Markdown supported, theme only
 avatar | author’s avatar | string, URL, theme only
 twitter | author’s twitter id | string, theme only
 facebook | author’s facebook id | string, theme only
-darkImage | dark image? | boolean, override `darkImage` in `config.toml`, theme only
 smallCaps | small caps? | boolean, override `enableSmallCaps` in `config.toml`, theme only
 dropCap | drop cap? | boolean, override `enableDropCap` in `config.toml`, theme only
 dropCapAfterHr | drop cap after every horizontal rule tag? | boolean, override `enableDropCapAfterHr` in `config.toml`, theme only

README.zh-cn.md

@@ -522,10 +522,6 @@ defaultTheme = "light"
 hideThemeToggle = false
 # 是否在首页隐藏模式切换开关
 hideThemeToggleInHome = false
-# 是否深色化图片
-# 对白底的黑白图片效果较好，对于彩色图片效果较差，建议在这里设置为 `false`
-# 如果你的某篇需要，可以在该文章的 Front Matter 中设置为 `true`
-darkImage = false
 
 # 网页应用
 # 前往 https://realfavicongenerator.net/ 生成相关图标和文件
@@ -939,7 +935,6 @@ motto | author’s description | string, Markdown supported, theme only
 avatar | author’s avatar | string, URL, theme only
 twitter | author’s twitter id | string, theme only
 facebook | author’s facebook id | string, theme only
-darkImage | dark image? | boolean, override `darkImage` in `config.toml`, theme only
 smallCaps | small caps? | boolean, override `enableSmallCaps` in `config.toml`, theme only
 dropCap | drop cap? | boolean, override `enableDropCap` in `config.toml`, theme only
 dropCapAfterHr | drop cap after every horizontal rule tag? | boolean, override `enableDropCapAfterHr` in `config.toml`, theme only

assets/scss/main.scss

@@ -100,6 +100,9 @@
         position: relative;
         z-index: 4;
     }
+    html[data-theme='dark'] .post img {
+        filter: brightness(50%);
+    }
 {{ end }}
 
 {{ if and .Site.IsMultiLingual .Site.Params.enableLangToggle }}

exampleSite/config.toml

@@ -491,13 +491,6 @@ defaultTheme = "light"
 # has enabled Dark Mode (`prefers-color-scheme: dark`).
 hideThemeToggle = false
 hideThemeToggleInHome = false
-# Useful for black and white images on a white background.
-# Bad for color images. I suggest you set `true` in post’s
-# Front Matter instead of here, unless all your images are
-# black and white on a white background. Also, you can set
-# `true` here and set `false` in Front Matter which will
-# override what you have set here.
-darkImage = true
 
 # Web App
 # https://realfavicongenerator.net/

layouts/partials/style.html

@@ -15,10 +15,6 @@
     {{- if or (and .IsHome .Site.Params.hideThemeToggleInHome) (and (not .IsHome) .Site.Params.hideThemeToggle) -}}
         {{- .Scratch.Add "style" "#theme-toggle {display:none}" -}}
     {{- end -}}
-
-    {{- if .Params.darkImage | default .Site.Params.darkImage -}}
-        {{- .Scratch.Add "style" "html[data-theme='dark'] .post img {filter:invert(85%) hue-rotate(180deg)}" -}}
-    {{- end -}}
 {{- end -}}
 
 {{- if and .Site.IsMultiLingual .Site.Params.enableLangToggle -}}