Custom Theme [自定义主题] 透明 GitHub 暗黑模式

[ElapseRecall]

复制代码到「设置 -> 查词面板 -> _自定义查词面板样式」即可，如果有不需要的样式可以自行调整参数即可。

/* 主面板 */
.dictPanel-Root {
    --color-brand: #1c2128 !important; /* 菜单栏背景颜色 */
    --color-background: #22272e99 !important; /* 词典背景颜色 */
    --color-font: #adbac7 !important; /* 全局字体颜色 */
    width: 450px !important; /* 面板宽度 */
    background-color: #00000099; /* 底图颜色 */
    border-radius: 8px;
}

/* 隐藏侧边滚动条 */
.fancy-scrollbar::-webkit-scrollbar {
    display: none; /* 适用于 Blink 或 WebKit 的浏览器 */
}
.fancy-scrollbar {
    scrollbar-width: none; /* 适用于 Firefox */
}

/* 菜单栏调整 */
.menuBar {
    height: 36px;
    padding: 0;
}

/* 查词记录按钮 */
.menuBar-Btn-dir {
    width: 30px;
    padding: 8px;
}

/* 搜索框 */
.menuBar-SearchBox {
    width: 135px;
    height: 26px;
    border-radius: 4px;
}

/* 菜单栏按钮鼠标悬浮变色 */
.menuBar > button {
    border-radius: 4px;
    margin: 3px;
}
.menuBar > button:hover {
    background-color: #347d39;
}
.menuBar > button:last-of-type:hover {
    background-color: #e5534b80;
}
.menuBar-Btn {
    border-radius: 4px;
    margin: 3px;
}
.menuBar-Btn:hover {
    background-color: #539bf5;
}

/* 更改查词记录按钮鼠标图标 */
:disabled > svg {
    cursor: not-allowed;
}

/* 词典区 */
.dictItem {
    margin: 6px;
    border-radius: 8px;
}

/* 词典栏 */
.dictItemHead {
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #22272e;
    height: 32px;
    padding: 0 6px;
    align-items: center;
    position: static;
}

/* 词典名 */
.dictItemHead-Title > a {
    color: #539bf5;
}

/* 词典图片 */
.dictItemHead-Logo {
    border-radius: 4px;
}

/* 按钮垂直对齐 */
.dictItemHead-Menus_Btn {
    margin: 0;
}
.hoverBox-Container {
    display: flex;
}

/* 占位块 */
.dictItemHead-EmptyArea {
    cursor: pointer;
}

/* 详情区 */
.dictItem-Body {
    min-height: 16px;
}

/* 鼠标悬浮变色 */
.dictItemHead-Menus_Btn:hover > svg {
    background-color: #539bf5;
    border-radius: 4px;
}
.dictItemHead-FoldArrowBtn:hover {
    background-color: #347d39;
    border-radius: 4px;
}

/* 上下小箭头区 */
.mtaBox-DrawerBtn,
.waveformBox-DrawerBtn {
    border: none;
    background-color: #22272e99;
    display: none; /* 如需要小箭头可以删除 */
}

/* 更改全局字体 */
.saladict-panel {
    font-family: 'HarmonyOS Sans SC'; /* 字体名填自己电脑上安装的 */
}

/* 隐藏有道词典星星 */
.dictYoudao-Stars {
    display: none;
}

[ElapseRecall]

配色来自GitHub暗黑模式，尽可能的还原了，不好看的地方可以自行修改。

效果预览

加载中	加载完毕	更换字体

修改部分

• 菜单栏重新排版，每个按钮大小统一
• 查词记录按钮触底显示 🚫
• 菜单栏按钮鼠标悬浮显示背景色
• 隐藏侧边滚动条
• 词典区仿Fluent Design
• 词典名称栏取消固定
• 隐藏顶部多行文本输入框和底部发音选项卡

[Hylenbin]

几乎完美，只有一个问题，就是例句区的文字看不清

[ElapseRecall]

可以尝试自己更改字体颜色，如果会CSS能自定义更多地方( •̀ ω •́ )✧

--color-font: #adbac7 !important; /* 全局字体颜色 */

[Hylenbin]

非常感谢你的回复，我之前尝试过你给出的方法，全局字体#FFFFFF
但是例句区的字体颜色似乎不会一起改变（或者是改变很小？），

附件我长传了一张 全局 #FFFFFF 例句区的效果图。
另，这个问题吧，例句区的字体其实晚上还好，看的清，白天稍微有点看不清

[ElapseRecall]

我不知道你用的什么词典，我试着用柯林斯复现，但始终没有看到一模一样的界面，不过用别的词典也能找到这种例句不变色的情况，我试着给他们共用的的 .dictItem-Body 类名加样式，效果如下，还是没法让例句继承样式。

.dictItem-Body	.def-body .trans

最后我只能单独给某一个词典的例句类名，像是剑桥词典的 .def-body .trans 加样式，结果如下，如果你常用某几款词典，可以试着去给他们一个个指定样式，不会很麻烦，如果有需要我可以帮忙看看。

[Hylenbin]

太感谢了，按照上面的方法终于解决了问题！