非你网

有封装好的 useDark useToggle 这些插件，做项目就很方便。可是用的时候，会遇到一些问题。其实到最后，不是问题了。比如改变主题的时候，transition 失效了。因为没 transition，强行改变背景颜色等就会很生硬。transition 失效是因为 userColorMode 在处理改变的时候，先禁用 transition 再取消禁用导致的。在创建 useDark 的时候，options 的 disableTransition 可以控制该行为，只是不传值的时候，默认就是 true，就是禁用 trasition。那么默认传入 disableTransition 为 false 的值就可以搞定了。

https://github.com/vueuse/vueuse/blob/main/packages/core/useColorMode/index.ts#L122

const isDark = useDark({disableTransition: false})
 const toggleDark = useToggle(isDark)

只需上边这样实现即可。

let style: HTMLStyleElement | undefined
      if (disableTransition) {
        style = window!.document.createElement('style')
        const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
        style.appendChild(document.createTextNode(styleString))
        window!.document.head.appendChild(style)
      }

      if (attribute === 'class') {
        const current = value.split(/\s/g)
        Object.values(modes)
          .flatMap(i => (i || '').split(/\s/g))
          .filter(Boolean)
          .forEach((v) => {
            if (current.includes(v))
              el.classList.add(v)
            else
              el.classList.remove(v)
          })
      }
      else {
        el.setAttribute(attribute, value)
      }

      if (disableTransition) {
        // Calling getComputedStyle forces the browser to redraw
        // @ts-expect-error unused variable
        const _ = window!.getComputedStyle(style!).opacity
        document.head.removeChild(style!)
      }

参考

https://segmentfault.com/q/1010000043785052

https://github.com/vueuse/vueuse/issues/3167

https://vueuse.org/core/useDark/