icarus主题5.2.1添加黑暗模式

icarus主题默认不支持黑暗模式，相关问题，参考这个文章，使用hexo5的注入器功能添加支持，效果见主页

添加icon图标

_config.icarus.yml

navbar:
    # 导航栏菜单项
    # ...
    # 导航栏右侧的链接
    links:
        切换亮色:
            icon: fa-solid fa-circle-half-stroke
            url: javascript:;

重启 npm run server 就可以看到按钮

添加按钮事件

在scripts下添加一个js文件比如：

scripts/injector.js

scripts/injector.js

// hexo.extend.injector.register('body_end', `<script>alert('hello');</script>`, 'default');
hexo.extend.injector.register('body_end', `<script src="/article/js/darkmode.js"></script>`, 'default');
hexo.extend.injector.register('head_begin', `<link rel="stylesheet" href="/article/css/darkmode.css"></link>`, 'default');

在主题配置文件中添加js和css文件

themes/icarus/source/js/darkmode.js

(function(){
  // 找到元素 .navbar-end 第一个子元素
  var navbarEnd = document.getElementsByClassName('navbar-end');
  if (navbarEnd.length === 0) { return; }
  var navbarMenu = navbarEnd[0].firstElementChild;
  if (navbarMenu === null) { return; }
  // 给navbarMenu <a> 删除属性 target 和 href
  navbarMenu.removeAttribute('target');
  navbarMenu.removeAttribute('href');
  // 给navbarMenu <a> 添加属性 onclick
  navbarMenu.setAttribute('onclick', 'darkmode()');

  // darkmode 初始化读取
  var darkmode = localStorage.getItem('darkmode');
  // darkmode 没有 初始化为 false
  if (darkmode === null) {
    darkmode = false;
    localStorage.setItem('darkmode', darkmode);
    return;
  }
  // darkmode 为 'true' 则添加 class darkmode
  if (darkmode === 'true') {
    document.body.classList.add('darkmode');
  }
})();

// 切换 darkmode 状态
function darkmode() {
  // 读取localStorage的 darkmode 状态 'true' 或 'false'
  var darkmode = localStorage.getItem('darkmode');
  // 如果 darkmode 是 'false' 则设置为 'true'
  if (darkmode === 'false') {
    darkmode = true;
    localStorage.setItem('darkmode', darkmode);
  }
  // 如果 darkmode 是 'true' 则设置为 'false'
  else {
    darkmode = false;
    localStorage.setItem('darkmode', darkmode);
  }
  // 设置body的 class
  if (darkmode) {
    document.body.classList.add('darkmode');
  } else {
    document.body.classList.remove('darkmode');
  }
};

themes/icarus/source/css/darkmode.css

:root {
  --active-color: #79acff;
  --text-color: #dddddd;
  --background-color: #333;
  --card-background-color: #777777ad;
}

/* 文字 */
.darkmode a.navbar-item,
.darkmode .title,
.darkmode .content,
.darkmode .content>h1,
.darkmode .content>h2,
.darkmode .content>h3,
.darkmode .content>h4,
.darkmode .content>h5,
.darkmode .content>h6,
.darkmode .content>p,
.darkmode .level
{
  color: var(--text-color);
}


/* 导航栏 */
.darkmode nav,
.darkmode .navbar-menu
{
  background-color: var(--background-color);
}
/* 激活项目 */
.darkmode a.is-active
{
  color: var(--active-color);
  background-color: var(--card-background-color);
}
/* 悬浮 */
.darkmode a.navbar-item:hover,
.darkmode a.level:hover
{
  background-color: var(--card-background-color);
}

/* body 背景 */
.darkmode
{
  background-color: var(--card-background-color);
}

/* 文章 卡片 */
.darkmode .card-content,
.darkmode .box
{
  background-color: var(--background-color);
  color: var(--text-color);
}

/* 时间线白条 */
.darkmode .timeline .media:last-child:after
{
  background: transparent;
}

/* link-muted */
.darkmode .link-muted
{
  color: var(--text-color);
}

/* back-to-top */
.darkmode #back-to-top
{
  background-color: #0807077d;
  color: var(--text-color);
}

/* footer */
.darkmode footer
{
  background-color: var(--background-color);
  color: var(--text-color);
}