Posts: Hexo Volantis theme music player Aplayer adapts to dark mode and can follow changes.

Note！！！

If you have enabled aplayer in _config.volantis.yml

Then you can completely close this page

This article is only applicable to individual pages

plugins:
  aplayer:
    enable: true

Preface

Last night, my own website's aplayer blinded me

In a fit of anger, I created this

Getting Started

The main focus is on modifying aplayer's CSS

Add the following JavaScript anywhere on the website

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");

Where APlayer.dark.min.css is for dark mode APlayer.light.min.css is for light mode

References

1. Hexo blog music player Aplayer dark mode css file(https://blog.zhheo.com/p/46d7a5f0.html)
2. volantis development documentation(https://volantis.js.org/v5/development-api/)