【dark模式】简单毛玻璃

[swithun-liu]

目前只适配了「黑暗模式」

适合常看黑色背景网页（比如我是使用 Dark Reader 插件强制转换没有黑色模式的网页）的情况

2022/9/10

黑色网页效果	白色网页效果	独立面板

问题：独立面板和白色背景情况下，由于面板本身的白色底色，显示为灰色， 可以调整 background: #1818189c !important; -> background: #181818cc !important; ，三种情况下的效果都是接近的黑色，但是黑色网页时透明效果变差，自行选择。「目前暂无更好的解决方式」

.menuBar {
    background-color: #00000000;
}
.dictPanel-Root {
    --color-brand: #00000000 !important;
    --color-rgb-background: #00000000 !important;
    --color-font: #ddd !important;
    --color-divider: #4d4748 !important;

    background: linear-gradient(145deg, #00000000, #00000000) !important;
    background-image: linear-gradient(145deg, #00000000, #00000000);
    background: #1818189c !important;

    border: 0.5px solid #ffffff33;
    border-radius: 7px;

    box-shadow: rgb(0 0 0) 0 0px 30px 10px;

    backdrop-filter: blur(10px);
}
.darkMode .saladict-theme {
    background-color: #00000000 !important;
    --color-background: #00000000 !important;
    --darkreader-bg--color-background: #00000000;
}
.mtaBox-DrawerBtn {
    background-color: #00000000;
}

旧 2022/8/13

.menuBar {
  background-color: #00000000;
}
.dictPanel-Root {
  --color-brand: #00000000 !important;
  --color-rgb-background: #00000000 !important;
  --color-font: #ddd !important;
  --color-divider: #4d4748 !important;

  border-radius: 7px;
  background: linear-gradient(145deg, #3e3e3e, #4a4a4a);
  box-shadow: rgb(0 0 0) 0 0px 30px 10px;

}
.darkMode .saladict-theme {
    background-color: #00000000 !important;
    --color-background: #00000000 !important;
    --darkreader-bg--color-background: #00000000;

}
.dictPanel-Root {
    background-image: linear-gradient(145deg, rgb(73 77 79 / 72%), rgb(80 85 87));
    backdrop-filter: blur(6px);
}
.mtaBox-DrawerBtn {
    background-color: #00000000;
}

[crimx]

好厉害🤩

[X-Ray1128]

请问为啥独立面板的主题会不一样

[X-Ray1128]

请问为啥独立面板的主题会不一样

[swithun-liu]

有截图吗

[X-Ray1128]

这是独立窗口面板

这是正常翻译面板

[X-Ray1128]

这是独立窗口的面板

[swithun-liu]

独立面板和白色背景情况下，由于面板本身的白色底色，显示为灰色， 可以调整 background: #1818189c !important; -> background: #181818cc !important; ，三种情况下的效果都是接近的黑色，但是黑色网页时透明效果变差，自行选择。「目前暂无更好的解决方式」

[rehman-talha]

please help me with dark mode for pdf. Thanks in advance.

请帮助我使用 pdf 的暗模式。 提前致谢

Please build a dark mode for pdf option. Thank you. I love Saladict.
请为 pdf 选项建立一个暗模式。 谢谢你。 我喜欢沙拉迪克。

@swithun-liu
@crimx

[swithun-liu]

Thank you, but I don't know how to get to this code. I have no coding experience!

just copy it from here

then paste it to here

[rehman-talha]

thanks, it looks cool. what I wanted to say was how to make the background of this pdf dark? This is a book that I have opened.

[swithun-liu]

oh, I see, but I don't familiar with that

[rehman-talha]

Okays, Thank you for helping me out.

[crimx]

It seems not possible by default. This workaround works but bookmarklet is not supported on Browser Extensions. Saladict has to implement it as a new option.

If you want to try it now, press F12 on the PDF page, paste below on the console input and press ↵

document.getElementById('viewer').style.filter = 'invert(64%) contrast(228%) brightness(80%) hue-rotate(180deg)'

[rehman-talha]

Okay Thanks

…

On Mon, Oct 24, 2022, 07:16 CRIMX ***@***.***> wrote: It seems not possible by default. This workaround <mozilla/pdf.js#2071 (comment)> works but *bookmarklet* is not supported on Browser Extensions. Saladict has to implement it as a new option. If you want to try it now, press F12 on the PDF page, paste below on the console input and press ↵ document.getElementById('viewer').style.filter = 'invert(64%) contrast(228%) brightness(80%) hue-rotate(180deg)' — Reply to this email directly, view it on GitHub <#1813 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWGOFCVIN2PD3DNRZP3YSTTWEXWONANCNFSM56ON2KKQ> . You are receiving this because you commented.Message ID: ***@***.***>

[sodayamajk]

将博主的又改了一下，透明＋字体描边效果

.menuBar {
background-color: #00000000;
}
.dictPanel-Root {
color: white;

    font-size: 40px;

    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000,

      -1px -1px 0 #000;

background: linear-gradient(145deg, #00000000, #00000000) !important;
background-image: linear-gradient(145deg, #00000000, #00000000);
background: #1818189c !important;

border: 0.5px solid #ffffff33;
border-radius: 7px;

box-shadow: rgb(0 0 0) 0 0px 1px 1px;

backdrop-filter: blur(0px);

}
.darkMode .saladict-theme {
background-color: #00000000 !important;
--color-background: #00000000 !important;
--darkreader-bg--color-background: #00000000;
}
.mtaBox-DrawerBtn {
background-color: #00000000;
}

[sodayamajk]

但是不知道博主有没有方法将独立窗口也变透明啊

[sodayamajk]

[l3ony2k]

分享 + 备份一下我改的效果 : )

.menuBar {
    background-color: #00000000;
}
.dictPanel-Root {
    --color-brand: #F9690E !important;
    --color-rgb-background: #00000000 !important;
    --color-font: #ddd !important;
    --color-divider: #4d4748 !important;

    --darkreader-bg--color-background: #00000000;
    --darkreader-border--color-font: #333333 !important;
    --darkreader-bg--color-divider: #333333 !important;
    --darkreader-border--color-divider: #333333 !important;

    background: linear-gradient(145deg, #00000000, #00000000) !important;
    background-image: linear-gradient(145deg, #00000000, #00000000);
    background: #0000009c !important;

    border: 1px solid #33333333;
    border-radius: 7px;

    /*box-shadow: rgb(0 0 0) 0 0px 30px 10px;*/

    backdrop-filter: blur(25px);
}
.darkMode .saladict-theme {
    background-color: #00000000 !important;
    --color-background: #00000000 !important;
}
.mtaBox-DrawerBtn {
    background-color: #00000000;
}