[网页插件] 暗黑模式

@Ta 03-29 16:04发布,06-17 16:27修改 1091点击
导入网页插件:暗黑模式(当前用户:1,总安装次数:2)
<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>

头像左侧会有切换按钮

效果:

1.png

已知问题:

切换页面会闪屏

解决

导入网页插件:暗黑模式(无切换功能)(当前用户:0,总安装次数:0)
<style>
html, img {
  filter: invert(1) hue-rotate(.5turn);
}
img {
  opacity: .8;    
}
</style>

舍弃掉切换功能就可以了

参考

红米K30 Pro(变焦版)

回复列表(4)
  • @Ta / 03-29 17:07 / /

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

  • @Ta / 03-29 22:25 / /
    被锁定
    层主 @方妹 于 2022-03-29 22:25 删除了该楼层。
  • @Ta / 06-17 14:33 / /

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

  • @Ta / 06-17 16:23 / /

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

添加新回复
回复需要登录