APlayer 全局主题色设置

主题色影响哪些元素

theme 参数是一个十六进制颜色字符串，会影响以下界面元素：

• 播放进度条的已播放部分
• 音量条的高亮部分
• 播放列表中当前歌曲的标记色
• 按钮的 hover 和 active 状态背景
• 部分图标和边框的高亮色

默认值是 '#b7daff'（一种柔和的淡蓝色）。

代码示例

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    theme: '#FADFA3',  // 暖黄色
    audio: [...]
});

颜色格式

theme 参数支持以下格式：

推荐始终使用 6 位十六进制——最稳定、跨浏览器一致。

配色建议

主题色最好与以下元素协调：

• 专辑封面主色调（可以配合封面自适应主题色功能自动提取，参见 封面自适应主题色）
• 页面整体配色（如果播放器放在深色页脚，可以用较深的主题色如 '#333'）
• 品牌色（如果播放器是品牌页面的一部分，可以用品牌主色）

运行时修改主题色

初始化后也可以通过 API 修改全局主题色：

// 传入颜色和歌曲索引（可选）
ap.theme('#000', 0);  // 设置第一首歌的主题色为黑色
ap.theme('#FF6600');   // 不指定索引时，默认修改当前歌曲的主题色

注意：ap.theme() 方法会同时修改全局默认和指定歌曲的 audio.theme 字段。

与单曲主题色的优先级

APlayer 的主题色有两个层级：

1. 全局 theme：在初始化时设置，作为所有歌曲的默认值
2. 单曲 audio.theme：在单个 audio 对象上设置，优先级高于全局 theme

const ap = new APlayer({
    theme: '#b7daff',  // 全局默认淡蓝色
    audio: [
        { name: '歌曲一', theme: '#FF0000', ... },  // 红色，覆盖全局
        { name: '歌曲二', ... },                     // 没有设置，用全局淡蓝色
        { name: '歌曲三', theme: '#00FF00', ... }   // 绿色，覆盖全局
    ]
});

当切换歌曲时，如果新歌曲有自己的 audio.theme，播放器会自动切换到那个颜色。这就是为什么每首歌可以有不同主题色。