多主题色切换思路

多主题切换思想路线

功能介绍

2023-10-30 [0.0.0 -> 0.0.0]

  1. 实现方式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
// 自定义主题二
[naokuo-theme='mode2']
   //书写主题二的样式，如不同主题下鼠标指针
  --cursor-arrow: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/normal.cur")
  --cursor-backrunning: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-ban: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-busy: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-handwriting: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/No_Disponible.cur")
  --cursor-help: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-link: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-move: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
  --cursor-input: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/texto.cur")


  // 自定义主题二 夜间模式下设置    
  &[data-theme='dark']
    --cursor-arrow: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/normal.cur")
    --cursor-backrunning: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-ban: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-busy: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-handwriting: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/No_Disponible.cur")
    --cursor-help: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-link: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-move: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/ayuda.cur")
    --cursor-input: url("https://cdn.jsdelivr.net/gh/XXKDB/img_cdn/cursor/texto.cur")

//然后主主题引用
  1. 实现方式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
// 页面加载完成后读取主题模式数值
window.addEventListener("DOMContentLoaded", function () {
  // 读取主题模式数值没有就跳过
  var NaokuoMode2 = localStorage.getItem("naokuotheme")
  switch (NaokuoMode2) {
    case "mode1":
      document.documentElement.setAttribute('naokuo-theme', 'mode1')
      // alert(localStorage.getItem("naokuotheme"))
      break;
    case "mode2":
      document.documentElement.setAttribute('naokuo-theme', 'mode2')
      // alert(localStorage.getItem("naokuotheme"))
      break;
    default:
      break;
  }
})
//主题切换按钮
function naokuo_SwitcMode() {
  const NaokuoMode = document.documentElement.getAttribute('naokuo-theme')
  switch (NaokuoMode) {
    case "mode1":
      document.documentElement.setAttribute('naokuo-theme', 'mode2')
      localStorage.setItem("naokuotheme", document.documentElement.getAttribute('naokuo-theme'))
      // alert(localStorage.getItem("naokuotheme"))
      break;
    case "mode2":
      document.documentElement.setAttribute('naokuo-theme', 'mode1')
        // 存储主题模式数值
      localStorage.setItem("naokuotheme", document.documentElement.getAttribute('naokuo-theme'))
      // alert(localStorage.getItem("naokuotheme"))
      break;
    default:
      break;
  }
}

  1. 实现方式pug
1
2
//- 设置默认主题样式 (naokuo-theme="mode1")
html(lang=config.language data-theme=theme.display_mode naokuo-theme="mode1" class=htmlClassHideAside)