参考文章

参考文章

效果预览

HTML

  • 在路径themes/anzhiyu/layout/includes/anzhiyu/创建Day_night_toggle_button.pug文件
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

.container
  .components
    .main-button
      .moon
      .moon
      .moon
    .daytime-backgrond
    .daytime-backgrond
    .daytime-backgrond
    .cloud
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
    .cloud-light
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
      .cloud-son
    .stars
      .star.big
        .star-son
        .star-son
        .star-son
        .star-son
      .star.big
        .star-son
        .star-son
        .star-son
        .star-son
      .star.medium
        .star-son
        .star-son
        .star-son
        .star-son
      .star.medium
        .star-son
        .star-son
        .star-son
        .star-son
      .star.small
        .star-son
        .star-son
        .star-son
        .star-son
      .star.small
        .star-son
        .star-son
        .star-son
        .star-son

  • 中控台引用
  • themes/anzhiyu/layout/includes/anzhiyu/console.pug

屏幕截图 2024-01-31 155225.png

1
2
3
4
5
6
7
8
9
10

    if theme.shortcutKey.enable
      .console-btn-item#consoleKeyboard(onclick='anzhiyu.keyboardToggle()', title='快捷键开关')
        a.keyboard-switch
          i.naokuofont.naokuo-icon-keyboard
+   if theme.Day_night_toggle_button.console
+     #console-naoDark
+       !=partial('includes/anzhiyu/Day_night_toggle_button', {}, {cache: true})
  .console-mask(onclick='anzhiyu.hideConsole()', href='javascript:void(0);')

  • 导航栏引用
  • themes/anzhiyu/layout/includes/header/nav.pug

屏幕截图 2024-01-31 155243.png

1
2
3
4
5
6
7
8

    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})
    #nav-right
+     if theme.Day_night_toggle_button.nav
+       #nav-naoDark
+         !=partial('includes/anzhiyu/Day_night_toggle_button', {}, {cache: true})

CSS

  • 在路径themes/anzhiyu/source/css/_layout/创建Day_night_toggle_button.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370

if hexo-config('Day_night_toggle_button.console') || hexo-config('Day_night_toggle_button.nav')
  .container 
    position relative
    width 180em
    height 70em
    display inline-block
    vertical-align bottom
    transform translate3d(0, 0, 0)
    .components 
      position fixed
      width 180em
      height 70em
      background-color rgba(70, 133, 192, 1)
      border-radius 100em
      box-shadow inset 0 0 5em 3em rgba(0, 0, 0, 0.5)
      overflow hidden
      transition 0.7s
      transition-timing-function cubic-bezier(0, 0.5, 1, 1)
      cursor pointer
    .main-button 
      margin 7.5em 0 0 7.5em
      width 55em
      height 55em
      background-color rgba(255, 195, 35, 1)
      border-radius 50%
      box-shadow 3em 3em 5em rgba(0, 0, 0, 0.5), inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em rgba(255, 230, 80, 1)
      transition 1.0s
      transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
    .moon 
      position absolute
      background-color rgba(150, 160, 180, 1)
      box-shadow inset 0em 0em 1em 1em rgba(0, 0, 0, 0.3)
      border-radius 50%
      transition 0.5s
      opacity 0
      &:nth-child(1) 
        top 7.5em
        left 25em
        width 12.5em
        height 12.5em
      &:nth-child(2) 
        top 20em
        left 7.5em
        width 20em
        height 20em
      &:nth-child(3) 
        top 32.5em
        left 32.5em
        width 12.5em
        height 12.5em
    .daytime-backgrond 
      position absolute
      border-radius 50%
      transition 1.0s
      transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
      &:nth-child(2) 
        top -20em
        left -20em
        width 110em
        height 110em
        background-color rgba(255, 255, 255, 0.2)
        z-index -2
      &:nth-child(3) 
        top -32.5em
        left -17.5em
        width 135em
        height 135em
        background-color rgba(255, 255, 255, 0.1)
        z-index -3
      &:nth-child(4) 
        top -45em
        left -15em
        width 160em
        height 160em
        background-color rgba(255, 255, 255, 0.05)
        z-index -4
    .cloud,
    .cloud-light 
      transform translateY(10em)
      transition 1.0s
      transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
    .cloud-son 
      position absolute
      background-color #fff
      border-radius 50%
      z-index -1
      transition transform 6s, right 1s, bottom 1s
      &:nth-child(6n 
        & + 1) 
          right -20em
          bottom 10em
          width 50em
          height 50em
        & + 2) 
          right -10em
          bottom -25em
          width 60em
          height 60em
        & + 3) 
          right 20em
          bottom -40em
          width 60em
          height 60em
        & + 4) 
          right 50em
          bottom -35em
          width 60em
          height 60em
        & + 5) 
          right 75em
          bottom -60em
          width 75em
          height 75em
        & + 6) 
          right 110em
          bottom -50em
          width 60em
          height 60em
    .cloud 
      z-index -2
    .cloud-light 
      position absolute
      right 0em
      bottom 25em
      opacity 0.5
      z-index -3
    .stars 
      transform translateY(-125em)
      z-index -2
      transition 1.0s
      transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
    .big 
      --size 7.5em
    .medium 
      --size 5em
    .small 
      --size 3em
    .star 
      position absolute
      width calc(2*var(--size))
      height calc(2*var(--size))
      &:nth-child(1) 
        top 11em
        left 39em
      &:nth-child(2) 
        top 39em
        left 91em
      &:nth-child(3) 
        top 26em
        left 19em
      &:nth-child(4) 
        top 37em
        left 66em
      &:nth-child(5) 
        top 21em
        left 75em
      &:nth-child(6) 
        top 51em
        left 38em
    .star-son 
      float left 
      &:nth-child(1) 
        --pos left 0
      &:nth-child(2) 
        --pos right 0
      &:nth-child(3) 
        --pos 0 bottom
      &:nth-child(4) 
        --pos right bottom    
    .star-son 
      width var(--size)
      height var(--size)
      background-image radial-gradient(circle var(--size) at var(--pos), transparent calc(95% - 1px), #fff 95%)
    .components
      .main-button
        &:hover
          transform: translateX(10em);
          & ~ .daytime-backgrond 
            &:nth-child(2) 
              transform: translateX(10em);
            &:nth-child(3) 
              transform: translateX(7em);
            &:nth-child(4) 
              transform: translateX(4em);
          & ~ .cloud .cloud-son
            &:nth-child(1) 
              right -24em
              bottom 10em
            &:nth-child(2) 
              right -12em
              bottom -27em
            &:nth-child(3) 
              right 17em
              bottom -43em
            &:nth-child(4) 
              right 46em
              bottom -39em
            &:nth-child(5) 
              right 70em
              bottom -65em
            &:nth-child(6) 
              right 109em
              bottom -54em
          & ~ .cloud-light .cloud-son
            &:nth-child(1) 
              right -23em
              bottom 10em
            &:nth-child(2) 
              right -11em
              bottom -26em
            &:nth-child(3) 
              right 18em
              bottom -42em
            &:nth-child(4) 
              right 47em
              bottom -38em
            &:nth-child(5) 
              right 74em
              bottom -64em
            &:nth-child(6) 
              right 110em
              bottom -55em

  @keyframes naoStar {
    0%,
    20% {
      transform: scale(0);
    }
    20%,
    100% {
      transform: scale(1);
    }
  }
  // 云朵动画
  @keyframes naoCloud {
    0% {
      transform: translate(2em, -2em);
    }
    50% {
      transform: translate(-2em, 2em);
    }
    100% {
      transform: translate(2em, -2em);
    }
  }
  [data-theme="light"] #console-naoDark,
  [data-theme="light"] #nav-naoDark
    .container 
      .cloud-son
        transform scale(1)
        transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
        transition 1s
        animation-iteration-count infinite
        animation-direction alternate
        animation-timing-function ease-in-out
        &:nth-child(6n + 1)
          animation-name naoCloud
          animation-duration 4.5s
        &:nth-child(6n + 2)
          animation-name naoCloud
          animation-duration 5.1s
        &:nth-child(6n + 3)
          animation-name naoCloud
          animation-duration 5.9s
        &:nth-child(6n + 4)
          animation-name naoCloud
          animation-duration 6.3s
        &:nth-child(6n + 5)
          animation-name naoCloud
          animation-duration 4.7s
        &:nth-child(6n + 6)
          animation-name naoCloud
          animation-duration 5s

  [data-theme="dark"] #console-naoDark,
  [data-theme="dark"] #nav-naoDark
    .container 
      .components 
        background-color: rgba(25,30,50,1)
      .main-button 
        transform: translateX(110em)
        background-color: rgba(195, 200,210,1)
        box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5), inset  -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset  4em 5em 2em -2em rgba(255, 255, 210,1)
      .moon 
        &:nth-child(1) 
          opacity: 1
        &:nth-child(2) 
          opacity: 1
        &:nth-child(3) 
          opacity: 1
      .daytime-backgrond 
        &:nth-child(2) 
          transform: translateX(110em)
        &:nth-child(3) 
          transform: translateX(80em)
        &:nth-child(4) 
          transform: translateX(50em)
      .cloud,
      .cloud-light 
        transform translateY(80em)
      .stars 
        transform translateY(-62.5em)
        opacity: 1
      .star 
        transform scale(1)
        transition-timing-function cubic-bezier(0.56, 1.35, 0.52, 1.00)
        transition 1s
        animation-iteration-count infinite
        animation-direction alternate
        animation-timing-function linear
        &:nth-child(1)
          animation-name naoStar
          animation-duration 3.5s
        &:nth-child(2) 
          animation-name naoStar
          animation-duration 4.1s
        &:nth-child(3) 
          animation-name naoStar
          animation-duration 4.9s
        &:nth-child(4) 
          animation-name naoStar
          animation-duration 5.3s
        &:nth-child(5) 
          animation-name naoStar
          animation-duration 3s
        &:nth-child(6) 
          animation-name naoStar
          animation-duration 2.2s
      .components
        .main-button 
          &:hover
            transform: translateX(100em)
            & ~ .daytime-backgrond 
              &:nth-child(2) 
                transform: translateX(100em)
              &:nth-child(3) 
                transform: translateX(73em)
              &:nth-child(4) 
                transform: translateX(46em)
            & ~ .stars .star 
              &:nth-child(1) 
                top: 10em
                left: 36em
              &:nth-child(2) 
                top: 40em
                left: 87em
              &:nth-child(3) 
                top: 26em
                left: 16em
              &:nth-child(4) 
                top: 38em
                left: 63em
              &:nth-child(5) 
                top: 20.5em
                left: 72em
              &:nth-child(6) 
                top: 51.5em
                left: 35em

  #nav-right
    if hexo-config('Day_night_toggle_button.console')
      #console-naoDark
        .container
          font-size: 0.85px
    if hexo-config('Day_night_toggle_button.nav')
      #nav-naoDark
        .container
          font-size: 0.5px

javascript

  • 添加按钮交互
  • 在路径themes/anzhiyu/source/js/main.js添加如下：
1
2
3
4
5
6
7
8
9
10
11
12

  window.refreshFn = function () {
    initAdjust();
    themeColorMeta = document.querySelector('meta[name="theme-color"]');
    pageHeaderEl = document.getElementById("page-header");
    navMusicEl = document.getElementById("nav-music");
    consoleEl = document.getElementById("console");

    addDarkModeEventListener("console", ".darkmode_switchbutton");
+   addDarkModeEventListener("nav-naoDark", ".components");
+   addDarkModeEventListener("console-naoDark", ".components");

主题配置

  • 主题配置文件_config.anzhiyu.yml
1
2
3
4
# 昼夜切换按钮
Day_night_toggle_button:
  console: true # 中控台
  nav: true # 导航栏

其他

  • 还有个类似的