Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化

my blog
Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化

注意！！！

如果你在 _config.volantis.yml 开启了 aplayer

那么你完全可以关掉这个页面了

该文章仅适用于 单独页面

plugins:
  aplayer:
    enable: true

前言

昨晚被自己网站的 aplayer 闪瞎了眼

一气之下整出了这个

开始

主要是对aplayer的css进行修改

在网站的任何地方加入下列javascript

function aplayerdark(){
    // 检查 volantis 的暗黑模式设置
    if (volantis.dark.mode === "dark") {
        loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.dark.min.css');
    } else if (volantis.dark.mode === "light") {
        loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.light.min.css');
    } else {
        loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.dark.min.css');
    }
}
// 动态加载 APlayer 主题 CSS 文件的函数
function loadAPlayerCSS(url) {
    // 创建一个link元素
    var link = document.createElement('link');
    
    // 设置link元素的属性
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    
    // 将link元素添加到head元素中
    document.getElementsByTagName('body')[0].appendChild(link);
}
// 执行
aplayerdark()
// 网页加载完成后又执行
window.onload = function() {
    aplayerdark()
}

// 注册回调函数到暗黑模式触发器
volantis.dark.push(aplayerdark, "aplayerDarkModeCallback");

其中 APlayer.dark.min.css 为暗黑模式
APlayer.light.min.css 为白天模式

参考资料

1. Hexo博客音乐播放器Aplayer深色模式css文件(https://blog.zhheo.com/p/46d7a5f0.html)
2. volantis 开发文档(https://volantis.js.org/v5/development-api/)