# Goldendict dark mode 如何不反转图片的颜色

**URL:** <https://forum.freemdict.com/t/topic/14606>\
**Category:** 词典装饰排版交流分享\
**Tags:** dark-mode, css, goldendict\
**Created:** [2022 年8 月 12 日 01:25 UTC](https://forum.freemdict.com/t/topic/14606 "2022-08-12T01:25:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

作者： ![webguest](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/54ee81/32.png) [@webguest](https://forum.freemdict.com/u/webguest)\
发布日期： [2022 年8 月 12 日 01:25 UTC](https://forum.freemdict.com/t/topic/14606/1 "2022-08-12T01:25:11Z")

</div>

没有找到合适的goldendict暗黑主题，自己 改 主题文件 article css 用 filter: invert  
文字效果不错， 如下图。但是invert 命令 把图片颜色也给反转了。这命令有没有参数项可以invert 所有但只排除图片文件呢？谢谢。

 ![Screenshot_20220811_202150](https://forumcdn.freemdict.com/uploads/default/original/3X/9/1/91d88f564e2ca1fc1fa1bd44ef8a7be2308a7a10.png)

---

<div class="post-metadata">

作者： ![webguest](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/54ee81/32.png) [@webguest](https://forum.freemdict.com/u/webguest)\
发布日期： [2022 年8 月 12 日 18:24 UTC](https://forum.freemdict.com/t/topic/14606/3 "2022-08-12T18:24:41Z")

</div>

我在 A 这个class 里 用了 -webkit-filter: invert（），反转整个网页  
`.A{-webkit-filter: invert()}`

对A里面的 img tag 用

```auto
img { 

  -webkit-filter: none !important;
}

```

无法 overide, 只能用 -webkit-filter: invert 再转回来， 但是感觉画质没以前好了。  
为什么不能override呢？

---

<div class="post-metadata">

作者： ![RANP0](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/848f3c/32.png) [@RANP0](https://forum.freemdict.com/u/RANP0)\
发布日期： [2022 年8 月 12 日 20:25 UTC](https://forum.freemdict.com/t/topic/14606/5 "2022-08-12T20:25:30Z")

</div>

如果能用 jQuery就可以`:not(img)`了。。  
楼主能分享下你的主题文件吗，我试了下`.A{-webkit-filter: invert()}`对我好像没用，不知道你具体是怎么写的

---

<div class="post-metadata">

作者： ![glacierlee](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/glacierlee/32/74595_2.png) [@glacierlee](https://forum.freemdict.com/u/glacierlee)\
发布日期： [2022 年8 月 13 日 00:33 UTC](https://forum.freemdict.com/t/topic/14606/7 "2022-08-13T00:33:44Z")

</div>

或者你可以试试这个

```auto
 a {color:#ff87ceeb}

 html {
                      filter: invert(90%) hue-rotate(180deg) !important;
                      -webkit-filter: invert(90%) hue-rotate(180deg) !important;
}
img {
                        filter: invert(90%) hue-rotate(180deg) !important;
                        -webkit-filter: invert(90%) hue-rotate(180deg) !important;
                        opacity: .75;    
}

```

---

<div class="post-metadata">

作者： ![webguest](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/54ee81/32.png) [@webguest](https://forum.freemdict.com/u/webguest)\
发布日期： [2022 年8 月 13 日 01:11 UTC](https://forum.freemdict.com/t/topic/14606/8 "2022-08-13T01:11:57Z")

</div>

多谢 ，我在再改改其他地方 以后会把改的差不多的dark theme 发到这里。 还想把界面做成minimalistic, 目前感觉窗口的边框margin都太大。

---

<div class="post-metadata">

作者： ![webguest](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/54ee81/32.png) [@webguest](https://forum.freemdict.com/u/webguest)\
发布日期： [2022 年8 月 13 日 01:13 UTC](https://forum.freemdict.com/t/topic/14606/9 "2022-08-13T01:13:29Z")

</div>

谢谢了，我试试这个。 面前虽然不能override, 但 img 和html各转一次，相互抵消看上去还行。

---

<div class="post-metadata">

作者： ![RANP0](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/848f3c/32.png) [@RANP0](https://forum.freemdict.com/u/RANP0)\
发布日期： [2022 年8 月 13 日 19:11 UTC](https://forum.freemdict.com/t/topic/14606/10 "2022-08-13T19:11:15Z")

</div>

嗯，能分享的话就太感谢了！

另外想请问下，有可能实现跟随系统切换深色浅色吗，  
我试了在 @glacierlee 提供的样式外套上 `@media (prefers-dark-interface)` 之类的代码，但好像不起作用，  
可能关系到goldendict自身是否支持这东西。