看别人的博客完全没有给 APlayer.js 播放器做暗黑模式适配的，于是自己写了一个。

APlayer

看别人的博客完全没有给 APlayer.js 播放器做暗黑模式适配的，于是自己写了一个。

APlayer 暗色模式 CSShttps://github.com/seiki-yui/APlayer-DarkMode

暗色模式 CSS

APlayer.dark.css
@media (prefers-color-scheme: dark) {
    .aplayer {
        background: rgb(24, 26, 27);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
        color: rgb(232, 230, 227);
    }
    .aplayer svg circle,
    .aplayer svg path {
        fill: rgb(255, 255, 255)
    }
    .aplayer.aplayer-withlist .aplayer-info {
        border-bottom: 1px solid rgb(36, 39, 41)
    }
    .aplayer.aplayer-fixed .aplayer-list {
        border: 1px solid rgb(53, 57, 59);
        border-bottom: none;
    }
    .aplayer.aplayer-fixed .aplayer-body {
        background: rgb(24, 26, 27);
    }
    .aplayer.aplayer-fixed .aplayer-lrc {
        text-shadow: 0 0 1px rgb(24, 26, 27), 0 0 10px rgb(24, 26, 27)
    }
    .aplayer.aplayer-fixed .aplayer-info {
        border-top: 1px solid rgb(36, 39, 41)
    }
    .aplayer .aplayer-pic .aplayer-button {
        text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        background: rgba(0, 0, 0, .2);
    }
    .aplayer .aplayer-pic .aplayer-button path {
        fill: rgb(255, 255, 255)
    }
    .aplayer .aplayer-pic .aplayer-play {
        border: 2px solid rgb(255, 255, 255);
    }
    .aplayer .aplayer-pic .aplayer-pause {
        border: 2px solid rgb(255, 255, 255);
    }
    .aplayer .aplayer-info .aplayer-music .aplayer-author {
        color: rgb(168, 160, 149)
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
        background: rgb(52, 57, 59)
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
        background: rgb(72, 78, 81);
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-time {
        color: rgb(168, 160, 149);
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
        fill: rgb(168, 160, 149)
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
        fill: rgb(191, 189, 187)
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
        background: rgb(72, 78, 81);
    }
    .aplayer .aplayer-lrc:before {
        background: linear-gradient(180deg, rgb(24, 26, 27) 0, hsla(0, 0%, 100%, 0));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF181A1B", endColorstr="#00181A1B", GradientType=0)
    }
    .aplayer .aplayer-lrc:after {
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, rgba(24, 26, 27, 0.8));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00181A1B", endColorstr="#CC181A1B", GradientType=0)
    }
    .aplayer .aplayer-lrc p {
        color: rgb(168, 160, 149);
    }
    .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
        background-color: hsl(200, 5%, 14%)
    }
    .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
        background-color: hsl(200, 5%, 18%)
    }
    .aplayer .aplayer-list ol li {
        border-top: 1px solid rgb(36, 39, 41);
    }
    .aplayer .aplayer-list ol li:hover {
        background: rgb(33, 36, 37)
    }
    .aplayer .aplayer-list ol li.aplayer-list-light {
        background: rgb(36, 39, 41)
    }
    .aplayer .aplayer-list ol li .aplayer-list-index {
        color: rgb(168, 160, 149);
    }
    .aplayer .aplayer-list ol li .aplayer-list-author {
        color: rgb(168, 160, 149);
    }
    .aplayer .aplayer-notice {
        background-color: rgb(30, 32, 34);
        color: rgb(165, 157, 145);
    }
    .aplayer .aplayer-miniswitcher {
        background: rgb(38, 41, 43);
    }
    .aplayer .aplayer-miniswitcher .aplayer-icon path {
        fill: rgb(168, 160, 149)
    }
    .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
        fill: rgb(191, 189, 187)
    }
}
APlayer.seiki.css
@import url("https://gcore.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css");
@import url("https://gcore.jsdelivr.net/gh/seiki-yui/APlayer-DarkMode@1.0.0/APlayer.dark.css") (prefers-color-scheme: dark);

使用方法

HTML 原生

<link rel="stylesheet" href="APlayer.min.css">

把默认的上文替换为下文即可。

<link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/seiki-yui/APlayer-DarkMode@1.0.0/APlayer.seiki.css">

hexo-tag-aplayer 插件

在 _config.yml 里加入：

aplayer:
  asset_inject: false

inject:
  head: 
    - <script src="https://gcore.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js" class="aplayer-script-marker"></script>
    - <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/gh/seiki-yui/APlayer-DarkMode@1.0.0/APlayer.seiki.css">

有关问题

以及有一个奇怪的地方：不知道是我的 Stellar 主题还是 hexo-tag-aplayer 的问题，吸底模式的 APlayer 主体被加了一句内联的：

margin-bottom: 20px

新建一个 CSS，或者下载 APlayer.seiki.css，加入以下样式即可解决：

.aplayer {
    margin-bottom: unset !important;
}
修复前
修复前
修复后
修复后

Giscus

Giscus 的默认暗色模式过黑，并不适合我的博客，思路上只要让默认主题的暗色改为 dark_dimmed 就行了；不过之前找到了个其他人分享的暗色模式，更美观，遂换了。

Giscus 暗色模式 CSShttps://github.com/seiki-yui/Giscus-DarkMode

暗色模式 CSS

Giscus.dark.css
main {
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #a5d6ff;
    --color-prettylights-syntax-keyword: #ec8e2c;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #fdac54;
    --color-prettylights-syntax-brackethighlighter-unmatched: #d47616;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #6c3906;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #914d04;
    --color-prettylights-syntax-string-regexp: #a5d6ff;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffe2bb;
    --color-prettylights-syntax-markup-deleted-bg: #4e2906;
    --color-prettylights-syntax-markup-inserted-text: #cae8ff;
    --color-prettylights-syntax-markup-inserted-bg: #0c2d6b;
    --color-prettylights-syntax-markup-changed-text: #ffe2bb;
    --color-prettylights-syntax-markup-changed-bg: #4e2906;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-btn-text: #c9d1d9;
    --color-btn-bg: #424242;
    --color-btn-border: rgb(240 246 252 / 10%);
    --color-btn-shadow: 0 0 transparent;
    --color-btn-inset-shadow: 0 0 transparent;
    --color-btn-hover-bg: #282828;
    --color-btn-hover-border: #8b949e;
    --color-btn-active-bg: hsl(212deg 12% 18% / 100%);
    --color-btn-active-border: #6e7681;
    --color-btn-selected-bg: #282828;
    --color-btn-primary-text: #fff;
    --color-btn-primary-bg: #1f6feb;
    --color-btn-primary-border: rgb(240 246 252 / 10%);
    --color-btn-primary-shadow: 0 0 transparent;
    --color-btn-primary-inset-shadow: 0 0 transparent;
    --color-btn-primary-hover-bg: #388bfd;
    --color-btn-primary-hover-border: rgb(240 246 252 / 10%);
    --color-btn-primary-selected-bg: #1f6feb;
    --color-btn-primary-selected-shadow: 0 0 transparent;
    --color-btn-primary-disabled-text: rgb(255 255 255 / 50%);
    --color-btn-primary-disabled-bg: rgb(31 111 235 / 60%);
    --color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #6e7681;
    --color-canvas-default: #282828;
    --color-canvas-overlay: #424242;
    --color-canvas-inset: #252525;
    --color-canvas-subtle: #424242;
    --color-border-default: #282828;
    --color-border-muted: #424242;
    --color-neutral-muted: rgb(110 118 129 / 40%);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-accent-muted: #282828;
    --color-accent-subtle: #282828;
    --color-success-fg: #58a6ff;
    --color-attention-fg: #d29922;
    --color-danger-fg: #d47616;
    --color-primer-shadow-inset: 0 0 transparent;
    --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
    --color-scale-gray-7: #424242;
    --color-scale-blue-8: #0c2d6b;

    /*! Extensions from @primer/css/alerts/flash.scss */
    --color-social-reaction-bg-hover: var(--color-scale-gray-7);
    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);

    color-scheme: dark;
}

main .pagination-loader-container {
    background-image: url("https://gcore.jsdelivr.net/gh/seiki-yui/Giscus-DarkMode/progressive-disclosure-line-dark.svg");
}

main .gsc-loading-image {
    background-image: url("https://gcore.jsdelivr.net/gh/seiki-yui/Giscus-DarkMode/mona-loading-dark.gif");
}
Giscus.seiki.css
@import url("https://giscus.app/themes/light.css") (prefers-color-scheme: light);
@import url("https://gcore.jsdelivr.net/gh/seiki-yui/Giscus-DarkMode/Giscus.dark.css") (prefers-color-scheme: dark);

使用方法

HTML 原生

<script data-xxx="..."
        data-theme="preferred_color_scheme"
        data-xxx="..."
        async>
</script>

把默认的上文替换为下文即可。

<script data-xxx="..."
        data-theme="https://gcore.jsdelivr.net/gh/seiki-yui/Giscus-DarkMode/Giscus.seiki.css"
        data-xxx="..."
        async>
</script>

Hexo Stellar 主题

在 _config.stellar.yml 里修改：

comments:
  giscus:
    data-theme: https://gcore.jsdelivr.net/gh/seiki-yui/Giscus-DarkMode/Giscus.seiki.css
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

本站由 xiao_zheng 使用 Stellar 1.29.1 主题创建。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本网站由 提供CDN支持。