在Hexo博客中适配APlayer和Waline的深色模式体验

发表于 分类于 阅读次数： Waline： 本文字数： 1.2k 阅读时长 ≈ 4 分钟

使用DarkMode.js实现深色模式后，发现第三方组件如APlayer音乐播放器和Waline评论系统并不能自动适配深色模式，这会导致深色模式下的显示效果不统一。

启用DarkMode.js

可通过以下配置启用深色模式开关：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 在_config.yml中配置
theme_config:
  darkmode_js:
    enable: true
    bottom: '130px'  # 取消底部定位
    right: 'unset'   # 取消右侧定位
    left: '32px'     # 左侧位置
    top: 'unset'     
    time: '0.5s'
    mixColor: 'transparent'
    backgroundColor: 'transparent'
    buttonColorDark: '#100f2c'
    buttonColorLight: '#fff'
    isActivated: false
    saveInCookies: true
    label: '🌓'
    autoMatchOsTheme: true
    
  # 确保pjax开启，以支持暗黑模式
  pjax: true

APlayer深色模式适配

APlayer基础代码

在source/_data/footer.njk中添加APlayer的基础代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.3.2/dist/color-thief.min.js"></script>

<meting-js
  fixed="true"
  mini="true"
  server="netease"
  type="playlist"
  id="你的歌单ID"
  autoplay="false"
  theme="#e9e9e9"
  order="random"
  list-folded="false"
  list-max-height="300px">
</meting-js>

自适应主题色脚本

实现根据封面图片自动设置主题色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 等待APlayer加载完成
  const checkAplayer = setInterval(function() {
    if (typeof aplayers !== 'undefined' && aplayers.length > 0) {
      clearInterval(checkAplayer);
      
      // 获取APlayer实例
      const ap = aplayers[0];
      
      // 初始化ColorThief
      if (typeof ColorThief !== 'undefined') {
        const colorThief = new ColorThief();
        const image = new Image();
        const xhr = new XMLHttpRequest();
        
        // 设置主题色函数
        const setTheme = (index) => {
          if (!ap.list.audios[index].theme) {
            xhr.onload = function() {
              let coverUrl = URL.createObjectURL(this.response);
              image.crossOrigin = 'Anonymous';
              image.onload = function() {
                try {
                  let color = colorThief.getColor(image);
                  ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  console.log(`设置主题色: rgb(${color[0]}, ${color[1]}, ${color[2]})`);
                } catch (e) {
                  console.error('获取主题色失败:', e);
                }
                URL.revokeObjectURL(coverUrl);
              };
              image.onerror = function() {
                console.error('封面图片加载失败');
                URL.revokeObjectURL(coverUrl);
              };
              image.src = coverUrl;
            };
            xhr.onerror = function() {
              console.error('获取封面失败');
            };
            xhr.open('GET', ap.list.audios[index].cover, true);
            xhr.responseType = 'blob';
            xhr.send();
          }
        };
        
        // 初始曲目设置主题色
        if (ap.list && ap.list.index !== undefined) {
          setTheme(ap.list.index);
        }
        
        // 切换曲目时自动更新主题色
        ap.on('listswitch', (index) => {
          setTheme(index);
        });
      }
    }
  }, 100);
});
</script>

添加深色模式CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<style>
.aplayer.aplayer-fixed {
  z-index: 1001 !important; /* 提高z-index确保在darkmode按钮之上 */
  right: 20px !important;
  bottom: 50px !important; /* 离底部距离 */
}

.aplayer.aplayer-fixed .aplayer-body {
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.aplayer.aplayer-fixed .aplayer-list {
  margin-bottom: 10px !important; 
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 确保APlayer在暗黑模式下歌曲名称颜色不变 */
.darkmode--activated .aplayer .aplayer-list ol li {
  color: #000 !important;
}

/* 新增针对标题的专门样式 */
.darkmode--activated .aplayer .aplayer-title,
.darkmode--activated .aplayer .aplayer-list ol li .aplayer-list-author,
.darkmode--activated .aplayer .aplayer-list ol li .aplayer-list-title {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* 覆盖渐变文本效果 */
}

/* 高亮选中的曲目 */
.darkmode--activated .aplayer .aplayer-list ol li.aplayer-list-light {
  background-color: #e9e9e9 !important; /* 保持选中曲目的背景色为浅色 */
}

/* 设置列表背景色为白色，避免深色模式影响 */
.darkmode--activated .aplayer .aplayer-list {
  background-color: #fff !important;
}

/* 调整暗黑模式按钮的样式 */
.darkmode-toggle {
  z-index: 1000 !important; /* 确保按钮在高层但低于APlayer列表 */
}

/* 为暗黑模式按钮添加背景和阴影，使其更明显 */
.darkmode-toggle {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* 暗黑模式下 */
.darkmode--activated .darkmode-toggle {
  background-color: rgba(40, 40, 40, 0.8) !important;
}

.darkmode--activated .aplayer.aplayer-fixed .aplayer-list {
  background-color: #fff !important;
}

/* 新增暗黑模式歌词样式修复 */
.darkmode--activated .aplayer-lrc-contents {
  text-shadow: none !important;
  color: #e0e0e0 !important;
  line-height: 1.5 !important;
}
</style>

Waline评论系统深色模式适配

配置Waline的深色模式选择器

在_config.yml中，指定Waline的深色模式选择器：

1
2
3
4
5
6
waline:
  enable: true
  serverURL: 你的Waline服务器URL
  # 更改暗黑模式的配置方式
  dark: 'html[data-darkmode]'
  # 其他配置...

Waline深色模式样式

在source/_data/styles.styl中添加以下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 强制覆盖Waline主题颜色
html body {
  --waline-theme-color: #3498db !important;
  --waline-active-color: #2980b9 !important;
  --waline-bgcolor: #fff !important;
  --waline-bgcolor-light: #f8f8f8 !important;
  --waline-border-color: #ddd !important;
  --waline-color: #444 !important;
}

// 完全强制覆盖元素样式
html body .wl-panel, 
html body .wl-card, 
html body .wl-editor,
html body .wl-header,
html body .wl-input,
html body .wl-textarea {
  background-color: #fff !important;
  color: #444 !important;
  border-color: #ddd !important;
}

// 暗黑模式下Waline样式
.darkmode--activated {
  // 强制覆盖所有Waline元素样式
  .wl-panel, .wl-card {
    background-color: #222 !important;
    border-color: #444 !important;
  }
  
  // 评论内容
  .wl-content p, .wl-content span, .wl-meta {
    color: #ccc !important;
  }
  
  // 输入框
  .wl-editor, .wl-input, .wl-textarea {
    background-color: #333 !important;
    color: #ddd !important;
    border-color: #555 !important;
  }
  
  // 按钮
  .wl-btn {
    background-color: #3498db !important;
    color: #fff !important;
    border-color: #3498db !important;
  }
}

Waline强制样式脚本

在source/_data/body-end.njk中添加脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 等待Waline元素加载完成
  const checkWaline = setInterval(function() {
    const walineEl = document.querySelector('.wl-panel');
    if (walineEl) {
      clearInterval(checkWaline);
      
      // 监听暗黑模式变化，强制更新评论区样式
      if (typeof window.darkmode !== 'undefined') {
        window.darkmode.addEventListener('change', function(event) {
          setTimeout(function() {
            const isDark = document.body.classList.contains('darkmode--activated');
            
            if (isDark) {
              // 直接修改DOM元素样式
              document.querySelectorAll('.wl-panel, .wl-card').forEach(el => {
                el.style.setProperty('background-color', '#222', 'important');
                el.style.setProperty('border-color', '#444', 'important');
              });
              
              document.querySelectorAll('.wl-editor, .wl-input, .wl-textarea').forEach(el => {
                el.style.setProperty('background-color', '#333', 'important');
                el.style.setProperty('color', '#ddd', 'important');
                el.style.setProperty('border-color', '#555', 'important');
              });
              
              document.querySelectorAll('.wl-content, .wl-meta, .wl-meta span, .wl-meta a').forEach(el => {
                el.style.setProperty('color', '#ccc', 'important');
              });
            }
          }, 100);
        });
      }
    }
  }, 100);
});
</script>