Custom Theme [自定义主题] [漂亮的主题]

[honghuhu]

复制代码到「设置 -> 查词面板 -> 自定义查词面板样式」即可。

.dictRoot {
    font-family: "Google Sans","圆体-简","楷体-简","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
}
body {
    background: #ffd4b5de !important
}
header,
section[class^="dictItem"],
button[class^="mtaBox-DrawerBtn"] {
    background-color: #ffffff00 !important
}

/* 不同区域词典 */
.dictJukuu-Ori {
    color: rebeccapurple
}
.dictJukuu-Src {
    color: #1fa7a2
}
.dictBing-Inf {
    color: #006788
}

/* 菜单按钮 */
[class^="menuBar"] {
    fill: #177ddc;
    color: black
}

/* 整个面板 */
.saladict-theme {
    --color-font: black !important;
    /* 例句字体颜色 */
    --color-font-grey: blue !important
}

/* 调出自己喜欢的样式 */
/* 词典头部&提示框&词典面板 */
.dictItemHead-Title a,
.floatBox-Container,
.dictPanel-Root {
    --color-background: #22222200 !important;
    /* 复制评论里的样式 | 随意变换颜色，只需替换下边样式即可 */
    background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%) !important;background-blend-mode: normal, normal, screen, overlay, normal
}

[honghuhu]

[&nbsp]可以随意变换颜色，调出自己喜欢的样式

关于渐变色的网站

• Gradienta
• CssGradients
• WebGradients
• InfiniteGradients

注：图片仅供参考，现实场景更漂亮

        background: linear-gradient(to top, yellow 0%, #fad67c 15%, #fda4a9 35%, #f891c3 52%, #d1b4f8 71%, #bcc3f3 87%, #f35461 100%) !important

    background: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%) !important

    background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%) !important

        background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%) !important

    background: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.00) 25% 50%, rgba(0, 0, 0, 0.05) 50% 75%, rgba(0, 0, 0, 0.00) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.00) 25% 50%, rgba(0, 0, 0, 0.05) 50% 75%, rgba(0, 0, 0, 0.00) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.00) 25% 50%, rgba(0, 0, 0, 0.05) 50% 75%, rgba(0, 0, 0, 0.00) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.00) 25% 50%, rgba(0, 0, 0, 0.05) 50% 75%, rgba(0, 0, 0, 0.00) 75%), linear-gradient(90deg, #fcffcb, #93ffdc) !important; background-position: 0 0, 0 0, 80px 50px, 80px 50px, 0 0; background-size: 160px 50px, 160px 50px, 160px 50px, 160px 50px, 100%

[crimx]

6666 🚀

[honghuhu]

适合亮色主题

body {
    background: #ffd4b5de !important
}

header,
section[class^="dictItem"],
button[class^="mtaBox-DrawerBtn"] {
    background-color: #ffffff00 !important
}

/* 菜单按钮 */
[class^="menuBar"] {
    fill : #177ddc;
    color: black
}

/* 整个面板 */
.saladict-theme {
    --color-font     : black !important;
    /* 例句字体颜色 */
    --color-font-grey: blue !important
}

/* 调出自己喜欢的样式 */
/* 词典头部&提示框&词典面板 */
.dictItemHead-Title a,
.floatBox-Container,
.dictPanel-Root {
    --color-background: #22222200 !important;
    /* 复制评论里的样式 | 随意变换颜色，只需替换下边样式即可 */
    background        : linear-gradient(125deg, #ffffff 0%, #8fe7e7 40%, #ffffff calc(60%), #f3f6f900 60%, #e9fbff calc(60%), #38f7dd 72%, #2cebff calc(72%), #8efaff 100%) !important
}

.entryBox {
    border: 0px solid red;
    background: linear-gradient(90deg, red 50%, transparent 0) repeat-x,
        linear-gradient(90deg, rgb(0, 252, 0) 50%, transparent 0) repeat-x,
        linear-gradient(0deg, purple 50%, transparent 0) repeat-y,
        linear-gradient(0deg, orange 50%, transparent 0) repeat-y;
    background-size    : 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation          : entryBoxAni 500ms infinite linear !important;
}

@keyframes entryBoxAni {
    100% {
        background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
}

[honghuhu]

适合暗色主题

body {
    background: #ffd4b5de !important
}

header,
section[class^="dictItem"],
button[class^="mtaBox-DrawerBtn"] {
    background-color: #ffffff00 !important
}

/* 菜单按钮 */
[class^="menuBar"] {
    fill : #ff00c8;
    color: white
}

/* 整个面板 */
.saladict-theme {
    --color-font     : white !important;
    --color-font-grey: yellow !important
}

/* 调出自己喜欢的样式 */
/* 词典头部&提示框&词典面板 */
.dictItemHead-Title a,
.floatBox-Container,
.dictPanel-Root {
    --color-background: #22222200 !important;
    /* 复制评论里的样式 | 随意变换颜色，只需替换下边样式即可 */
    background        : linear-gradient(45deg, rgb(0 0 0) 10%, rgb(25 48 52) 40%, rgb(0 0 0) 40%, rgb(0 0 0) 60%, rgb(0 0 0) 60%, rgb(118 0 149) 65%, rgb(0 0 0) 65%, rgb(0 0 0) 90%) !important
}

.entryBox {
    border: 0px solid red;
    background: linear-gradient(90deg, red 50%, transparent 0) repeat-x,
        linear-gradient(90deg, rgb(0, 252, 0) 50%, transparent 0) repeat-x,
        linear-gradient(0deg, purple 50%, transparent 0) repeat-y,
        linear-gradient(0deg, orange 50%, transparent 0) repeat-y;
    background-size    : 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation          : entryBoxAni 500ms infinite linear !important;
}

@keyframes entryBoxAni {
    100% {
        background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
}

[honghuhu]

entryBox 动效

.entryBox {
    border: 0px solid red;
    background: linear-gradient(90deg, red 50%, transparent 0) repeat-x,
        linear-gradient(90deg, rgb(0, 252, 0) 50%, transparent 0) repeat-x,
        linear-gradient(0deg, purple 50%, transparent 0) repeat-y,
        linear-gradient(0deg, orange 50%, transparent 0) repeat-y;
    background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: entryBoxAni 500ms infinite linear !important;
}

@keyframes entryBoxAni {
    100% {
        background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
}