【功能请求】适配深色模式

[wordpure]

如题，希望弹出窗口和选项界面可以适配深色模式。

[wordpure]

顺带一提，「弹出窗口 - 新下载 - 用户代理」这里的文本没有正常显示。

看了下，是用户代理在 popup/index.html 和 messages.json 的 i18n 名称没有对上。

[jc3213]

额，我记得这里是批量查找替换做的，oops。

新版本才能修复，但是没时间……

新版本预计把新下载窗口重新独立化，然后像火狐的某个扩展那样……

[wordpure]

新版本才能修复，但是没时间……

不急，大佬有空再改吧。

新版本预计把新下载窗口重新独立化，然后像火狐的某个扩展那样……

指的是 Aria2-AriaNG下载组件 吗？

期待😁

[jc3213]

准确的说是这个 https://github.com/RossWang/Aria2-Integration

[wordpure]

准确的说是这个 RossWang/Aria2-Integration

老前辈了

[jc3213]

另外关于深色模式，回头我研究下，毕竟只是个纯HTML网页。

[jc3213]

我这边用 chrome://flags/#enable-force-dark 测试，我这边的内容能自动成Dark Mode，不知道火狐有没有类似的开关？

[wordpure]

貌似没有。

设置里有一个覆盖颜色的选项，但效果很不理想。

[jc3213]

Chromium的话打开后是下面的效果，火狐自己的Dark Theme怎样？

[jc3213]

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#:~:text=The%20prefers-color-scheme%20CSS%20media%20feature%20is%20used%20to,theme,%20or%20has%20not%20expressed%20an%20active%20preference.

参考了这个，但是没卵用，估计你的下载扩展来实现类似功能了

[wordpure]

背景全黑，字体全白😂

[jc3213]

我这边用 @media (prefers-color-scheme: dark) { css code } 根本没效果，估计只能用js流方案，但是感觉有点裂开。感觉你用扩展会好点。

[wordpure]

感觉你用扩展会好点。

扩展程序的页面，其他扩展影响不了的，只能靠扩展自己实现或浏览器级别的设置。

我这边用 @media (prefers-color-scheme: dark) { css code } 根本没效果，估计只能用js流方案，但是感觉有点裂开

这么奇怪？我试一下。

[jc3213]

JS的方案如下，或者在css里面做一个class，然后识别出来以后直接给body添加这个class。但是我这边开了dark mode测试都是false，很怪。

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    var dark = document.createElement('style');
    dark.innerText = `{
          // you preferred dark css code
    }`;
}

[wordpure]

我这边用 @media (prefers-color-scheme: dark) 没问题啊。

Firefox

Chrome

就加了这一部分。

[jc3213]

可能是Vivaldi有bug吧，毕竟这浏览器为了整所谓的花哨theme已经把chrome.browserAction.setBadgeBackgroundColor给弄炸了。至于这里我回头换火狐再弄吧。

目前基础功能还需要调优

[wordpure]

可能是Vivaldi有bug吧，毕竟这浏览器为了整所谓的花哨theme已经把chrome.browserAction.setBadgeBackgroundColor给弄炸了。至于这里我回头换火狐再弄吧。

你看我这里的配色还行不？

可以的话我直接提个 PR？

[jc3213]

这个到时候我根据Chromium的版本来弄。

[jc3213]

细节还需要微调，但是感觉总是不对。有个啥参考就好了

[jc3213]

帮忙测试下最新的main分支，如果没问题dark mode我就不管去做其他优化了

[wordpure]

效果还不错，就是彩色按钮的文本对比度差了点，button、select 和 input 不好区分。

[jc3213]

我只是单纯觉得跟背景区分开就行了。分别参考了chromium的强制dark mode，github的dark mode跟mdn打开prefers-color-scheme: dark以后的效果。不知道为啥你那边跟我这边差距感觉有点明显？

[wordpure]

可点击和不可点击的按钮只有边框颜色有细微差别，不好区别。

[wordpure]

不知道为啥你那边跟我这边差距感觉有点明显？

你看我上两张截图就行，昨天发的截图是我自己改的配色，和现在不是同样的 CSS。

[jc3213]

现在呢？

[wordpure]

现在按钮好辨别多了🌹