导入网页插件：暗黑模式（当前用户：2，总安装次数：5）

<script>
  const isDark = Boolean(+localStorage.getItem('curtion_isdark'))
  let li = document.createElement('li')
  li.style.cursor = 'pointer'
  li.addEventListener('click', () => {
    const isDark = Boolean(+localStorage.getItem('curtion_isdark'))
    if (isDark) {
      document.querySelectorAll('img').forEach(item => {
        item.style.filter = ''
        item.style.opacity = '1'
      })
      document.querySelector('html').style.filter = ''
      localStorage.setItem('curtion_isdark', '0')
    } else {
      document.querySelectorAll('img').forEach(item => {
        item.style.filter = 'invert(1) hue-rotate(.5turn)'
        item.style.opacity = '0.8'
      })
      document.querySelector('html').style.filter = 'invert(1) hue-rotate(.5turn)'
      localStorage.setItem('curtion_isdark', '1')
    }
    li.innerText = isDark ? '深色' : '浅色'
  })
  li.innerText = isDark ? '浅色' : '深色'
  if (isDark) {
    document.querySelectorAll('img').forEach(item => {
      item.style.filter = 'invert(1) hue-rotate(.5turn)'
      item.style.opacity = '0.8'
    })
    document.querySelector('html').style.filter = 'invert(1) hue-rotate(.5turn)'
    localStorage.setItem('curtion_isdark', '1')
  }
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('img').forEach(item => {
      item.style.filter = 'invert(1) hue-rotate(.5turn)'
      item.style.opacity = '0.8'
    })
    document.querySelector('.header-nav').insertBefore(li, document.querySelector('.header-nav li:nth-last-child(1)'))
  })
</script>

头像左侧会有切换按钮

效果：

已知问题：

切换页面会闪屏

解决

导入网页插件：暗黑模式（无切换功能）（当前用户：0，总安装次数：0）

<style>
html, img {
  filter: invert(1) hue-rotate(.5turn);
}
img {
  opacity: .8;    
}
</style>

舍弃掉切换功能就可以了

参考

• https://www.zhangxinxu.com/wordpress/2020/11/css-mix-blend-mode-filter-dark-theme/

红米K30 Pro(变焦版)