<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>

头像左侧会有切换按钮

效果：

已知问题：

切换页面会闪屏

解决

<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(变焦版)

挺好，就是有一点太黑了
小米MIX2s(白)

@Curtion，在onload事件中执行切换颜色就是闪屏的原因，必须把切换颜色的操作放在任何事件之外（直接置于<script>的最外层），这样才能在用户看到页面之前实现颜色切换。

@老虎会游泳，已修改，虽然现在并没有什么用了
红米K30 Pro(变焦版)