Hexo（Next 主题）实现可切换的 Dark Mode (暗色背景 / 夜间模式) | 雪泥鴻爪

[dog-2]

https://dog.wtf/tech/hexo-dark-mode-note/

Title(EN): Hexo Dark Mode Note Author: dog2 Dark Mode —— 中老年程序🐶的眼睛续命必备功能 Mac、Win 纷纷推出了 Dark Mode，安卓也原生支持了随着夜幕降临自动调整屏幕亮度（蓝光）的功能，看来保护眼睛、关爱程序猿是大势所趋。 这里，我们尝试了3种使Hexo Next主题切换为darkmode的方式。

[Macyrate]

darkmode.js的方法似乎对Next的Pisces和Gemini模式不起作用😂

[dog-2]

@Macyrate darkmode.js的方法似乎对Next的Pisces和Gemini模式不起作用😂

• 其他两个模式我还没有试过
• 这篇文章写完之后，官方的next模版文件的后缀名更改过一次，不再是.swig，变成了.njk
• 由于next内部开发者的矛盾，导致官方仓库被变更，由于麻烦我folk的仓库就没有跟进更新了
• .njk里语法并没有大的修改，参照我folk的仓库里.swig文件的写法，在Muse下依然可以成功使用darkmode.js

我的Next版本v8.0.0-rc.3，新修改的文件themes/next/layout/_scripts/vendors.njk：

Source Code

```Nunjucks {%- set js_vendors = {} %} {%- set js_vendors = js_vendors | attr('anime', 'anime.min.js') %} {%- if theme.pjax %} {%- set js_vendors = js_vendors | attr('pjax', 'pjax/pjax.min.js') %} {%- endif %} {%- if theme.fancybox %} {%- set js_vendors = js_vendors | attr('jquery', '//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js') %} {%- set js_vendors = js_vendors | attr('fancybox', '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js') %} {%- endif %} {%- if theme.mediumzoom %} {%- set js_vendors = js_vendors | attr('mediumzoom', '//cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js') %} {%- endif %} {%- if theme.lazyload %} {%- set js_vendors = js_vendors | attr('lazyload', '//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js') %} {%- endif %} {%- if theme.pangu %} {%- set js_vendors = js_vendors | attr('pangu', '//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js') %} {%- endif %} {%- if theme.motion.enable %} {%- set js_vendors = js_vendors | attr('velocity', 'velocity/velocity.min.js') %} {%- set js_vendors = js_vendors | attr('velocity_ui', 'velocity/velocity.ui.min.js') %} {%- endif %} {%- if theme.canvas_ribbon.enable %} {%- set canvas_ribbon_uri = theme.vendors.canvas_ribbon or next_vendors('canvas-ribbon/canvas-ribbon.js') %} {%- endif %} {# Customize darkmode.js - Declaration #} {%- if theme.darkmode_js %} {# another way load js from CDN {%- set darkmode_js_uri = theme.vendors.darkmode_js %} #} {%- set js_vendors = js_vendors | attr('darkmode_js', 'darkmode-js/lib/darkmode-js.min.js') %} {%- endif %} {%- for name, internal in js_vendors %} {%- set internal_script = next_vendors(internal) %} {%- endfor %} {# Customize darkmode.js - Invokation #} {%- if theme.darkmode_js %} {%- endif %} ```

[haomingvince]

大佬知道为什么next 8.0在添加你给的代码在vendors.njk中会报错吗？Error: filter not found: attr

[Macyrate]

大佬知道为什么next 8.0在添加你给的代码在vendors.njk中会报错吗？Error: filter not found: attr

next8.0已经原生支持暗黑模式了吧……虽然不能手动切换

[haomingvince]

next8.0的文件有些不同，我写了一篇8.0的配置文档：https://haomingzhang.com/hexo_3/

[baiding72]

大佬！！怎么实现代码块也跟着切换呢