diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index 19d1007..80cbf25 100644
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -88,7 +88,7 @@
   }
 
 script.
-  const GLOBAL_CONFIG = { 
+  const GLOBAL_CONFIG = {
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
@@ -127,5 +127,6 @@ script.
     percent: {
       toc: !{theme.toc.scroll_percent},
       rightside: !{theme.rightside_scroll_percent},
-    }
+    },
+    autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1}
   }
diff --git a/layout/includes/third-party/abcjs/index.pug b/layout/includes/third-party/abcjs/index.pug
index 12d1478..1112626 100644
--- a/layout/includes/third-party/abcjs/index.pug
+++ b/layout/includes/third-party/abcjs/index.pug
@@ -1,4 +1,4 @@
-if theme.abcjs.enable
+if theme.abcjs && theme.abcjs.enable
   if theme.abcjs.per_page
     if is_post() || is_page()
       include ./abcjs.pug
diff --git a/layout/includes/third-party/card-post-count/artalk.pug b/layout/includes/third-party/card-post-count/artalk.pug
index 762c88d..ef4993e 100644
--- a/layout/includes/third-party/card-post-count/artalk.pug
+++ b/layout/includes/third-party/card-post-count/artalk.pug
@@ -4,7 +4,7 @@ script.
   (() => {
     const getArtalkCount = () => {
       const runWidget = () => {
-        Artalk.LoadCountWidget({
+        Artalk.loadCountWidget({
           server: '!{server}',
           site: '!{site}',
           countEl: '.artalk-count'
diff --git a/layout/includes/third-party/card-post-count/twikoo.pug b/layout/includes/third-party/card-post-count/twikoo.pug
index 314e4ac..72a4223 100644
--- a/layout/includes/third-party/card-post-count/twikoo.pug
+++ b/layout/includes/third-party/card-post-count/twikoo.pug
@@ -18,7 +18,7 @@ script.
           includeReply: false
         }).then(function (res) {
           document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
-            item.innerText = res[index].count
+            item.textContent = res[index].count
           })
         }).catch(function (err) {
           console.log(err)
diff --git a/layout/includes/third-party/comments/artalk.pug b/layout/includes/third-party/comments/artalk.pug
index 2a3bf22..0f7631e 100644
--- a/layout/includes/third-party/comments/artalk.pug
+++ b/layout/includes/third-party/comments/artalk.pug
@@ -11,22 +11,35 @@ script.
         darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
         countEl: '.artalk-count'
       },!{JSON.stringify(option)}))
+
+      if (GLOBAL_CONFIG.lightbox === 'null') return
+      window.artalkItem.use(ctx => {
+        ctx.on('list-loaded', () => {
+          ctx.getCommentList().forEach(comment => {
+            const $content = comment.getRender().$content
+            btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
+          })
+        })
+      })
     }
 
     if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
     else {
-      getCSS('!{theme.asset.artalk_css}')
-      typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
-                                  : setTimeout(()=>{initArtalk()},200)
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
+        typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
+                            : setTimeout(()=>{initArtalk()},200)
+      })
     }
   }
 
-  document.getElementById('darkmode').addEventListener('click',()=> {
-    if (typeof window.artalkItem !== 'object') return
-    let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
-    window.artalkItem.setDarkMode(!isDark)
-  })
+  function artalkChangeMode (theme) {
+    const artalkWrap = document.getElementById('artalk-wrap')
+    if (!(artalkWrap && artalkWrap.children.length)) return
+    const isDark = theme === 'dark'
+    window.artalkItem.setDarkMode(isDark)
+  }
 
+  btf.addModeChange('artalk', artalkChangeMode)
   
   if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
diff --git a/layout/includes/third-party/comments/disqus.pug b/layout/includes/third-party/comments/disqus.pug
index caa1222..3a9ba41 100644
--- a/layout/includes/third-party/comments/disqus.pug
+++ b/layout/includes/third-party/comments/disqus.pug
@@ -2,19 +2,21 @@
 
 script.
   function loadDisqus () {
-    var disqus_config = function () {
+    const disqus_config = function () {
       this.page.url = '!{ page.permalink }'
       this.page.identifier = '!{ url_for(page.path) }'
       this.page.title = '!{ disqusPageTitle }'
-    };
+    }
 
-    window.disqusReset = () => {
+    const disqusReset = () => {
       DISQUS.reset({
         reload: true,
         config: disqus_config
       })
     }
 
+    btf.addModeChange('disqus', disqusReset)
+
     if (window.DISQUS) disqusReset()
     else {
       (function() { 
@@ -24,10 +26,6 @@ script.
         (d.head || d.body).appendChild(s);
       })();
     }
-
-    document.getElementById('darkmode').addEventListener('click', () => {
-      setTimeout(() => window.disqusReset(), 200)
-    })
   }
 
   if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
diff --git a/layout/includes/third-party/comments/disqusjs.pug b/layout/includes/third-party/comments/disqusjs.pug
index 2b4a5f4..f0994e5 100644
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -23,7 +23,7 @@ script.
     }
 
 
-    document.getElementById('darkmode').addEventListener('click', themeChange)
+    btf.addModeChange('disqusjs', themeChange)
 
     if (window.disqusJsLoad) initDisqusjs()
     else {
diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug
index 7172687..e0d673a 100644
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -22,9 +22,19 @@ script.
       ele.setAttribute('crossorigin', 'anonymous')
       ele.setAttribute('id', 'facebook-jssdk')
       document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
-    }   
+    }
   }
 
+  function fbModeChange (theme) {
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
+    if ($fbComment && typeof FB === 'object') {
+      $fbComment.setAttribute('data-colorscheme',theme)
+      FB.XFBML.parse(document.getElementById('post-comment'))
+    }
+  }
+
+  btf.addModeChange('facebook_comments', fbModeChange)
+
   if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
     else loadFBComment()
diff --git a/layout/includes/third-party/comments/giscus.pug b/layout/includes/third-party/comments/giscus.pug
index cad50ae..0a9af83 100644
--- a/layout/includes/third-party/comments/giscus.pug
+++ b/layout/includes/third-party/comments/giscus.pug
@@ -3,8 +3,8 @@
 - const giscusOriginUrl = new URL(giscusUrl).origin
 
 script.
-  function getGiscusTheme () {
-    return document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+  function getGiscusTheme (theme) {
+    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
   }
 
   function loadGiscus () {
@@ -14,7 +14,7 @@ script.
       'data-repo-id': '!{repo_id}',
       'data-category-id': '!{category_id}',
       'data-mapping': 'pathname',
-      'data-theme': getGiscusTheme(),
+      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
       'data-reactions-enabled': '1',
       crossorigin: 'anonymous',
       async: true
@@ -27,7 +27,7 @@ script.
     document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function changeGiscusTheme () {
+  function changeGiscusTheme (theme) {
     function sendMessage(message) {
       const iframe = document.querySelector('iframe.giscus-frame')
       if (!iframe) return
@@ -36,11 +36,13 @@ script.
 
     sendMessage({
       setConfig: {
-        theme: getGiscusTheme()
+        theme: getGiscusTheme(theme)
       }
     });
   }
 
+  btf.addModeChange('giscus', changeGiscusTheme)
+
   if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
     else loadGiscus()
diff --git a/layout/includes/third-party/comments/gitalk.pug b/layout/includes/third-party/comments/gitalk.pug
index e162cce..922d657 100644
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/layout/includes/third-party/comments/gitalk.pug
@@ -24,7 +24,7 @@ script.
   function commentCount(n){
     let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
     if (isCommentCount) {
-      isCommentCount.innerHTML= n
+      isCommentCount.textContent= n
     }
   }
 
diff --git a/layout/includes/third-party/comments/remark42.pug b/layout/includes/third-party/comments/remark42.pug
index d6d49a6..222f9d3 100644
--- a/layout/includes/third-party/comments/remark42.pug
+++ b/layout/includes/third-party/comments/remark42.pug
@@ -51,11 +51,12 @@ script.
     }
   }
 
-  document.getElementById('darkmode').addEventListener('click',()=>{
+  function remarkChangeMode (theme) {
     if (!window.REMARK42) return
-    let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
     window.REMARK42.changeTheme(theme)
-  })
+  }
+
+  btf.addModeChange('remark42', remarkChangeMode)
 
   if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)
diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug
index 437a42f..bdaeb1e 100644
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -23,7 +23,7 @@ script.
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {
-        countELement.innerText = res[0].count
+        countELement.textContent = res[0].count
       }).catch(function (err) {
         console.error(err);
       });
diff --git a/layout/includes/third-party/comments/utterances.pug b/layout/includes/third-party/comments/utterances.pug
index 7f61831..c225325 100644
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/layout/includes/third-party/comments/utterances.pug
@@ -12,10 +12,10 @@ script.
     document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function utterancesTheme () {
+  function utterancesTheme (theme) {
     const iframe = document.querySelector('.utterances-frame')
     if (iframe) {
-      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+      const theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
       const message = {
         type: 'set-theme',
         theme: theme
@@ -24,6 +24,8 @@ script.
     }
   }
 
+  btf.addModeChange('utterances', utterancesTheme)
+
   if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
     else loadUtterances()
diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug
index 5b7b496..3222a4a 100644
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -21,6 +21,10 @@ script.
         window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
       }
 
+      btf.addModeChange('mermaid', () => {
+        window.runMermaid()
+      })
+
       window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
     }
   })()
\ No newline at end of file
diff --git a/layout/includes/third-party/newest-comments/artalk.pug b/layout/includes/third-party/newest-comments/artalk.pug
index 8940275..ccbc946 100644
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/layout/includes/third-party/newest-comments/artalk.pug
@@ -1,6 +1,6 @@
 - const { server, site, option } = theme.artalk
-- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/'
-- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp'
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && option.gravatar.default
 
 script.
   window.addEventListener('load', () => {
@@ -45,32 +45,51 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
-    const headerList = {
-      method: 'POST',
-      headers: {
-        'Origin': window.location.origin
+    const getSetting = async () => {
+      try {
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
+        return await res.json()
+      } catch (e) {
+        console.log(e)
       }
     }
 
-    const getComment = () => {
-      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}&site_name=!{site}', headerList)
-        .then(response => response.json())
-        .then(d => {
-          const artalk = d.data.map(function (e) {
-            return {
-              'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}',
-              'content': changeContent(e.content_marked),
-              'nick': e.nick,
-              'url': e.page_url,
-              'date': e.date,
-            }
-          })
-          saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(artalk)
-        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+    const headerList = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Origin': window.location.origin
+      },
+      body: new URLSearchParams({
+        'site_name': '!{site}',
+        'limit': '!{theme.newest_comments.limit}',
+        'type':'latest_comments'
+      })
+    }
+
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
+        const avatarStr = await getSetting()
+        const avatarCdn = !{avatarCdn} || avatarStr.data.frontend_conf.gravatar.mirror
+        const avatarDefault = !{avatarDefault} || avatarStr.data.frontend_conf.gravatar.default
+        const artalk = result.data.map(function (e) {
+          return {
+            'avatar': `${avatarCdn}${e.email_encrypted}?d=${avatarDefault}`,
+            'content': changeContent(e.content_marked),
+            'nick': e.nick,
+            'url': e.page_url,
+            'date': e.date,
+          }
         })
+        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
+        generateHtml(artalk)
+      } catch (e) {
+        console.log(e)
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+      }
     }
 
     const newestCommentInit = () => {
diff --git a/layout/includes/third-party/newest-comments/disqus-comment.pug b/layout/includes/third-party/newest-comments/disqus-comment.pug
index 5b95e74..2acba1c 100644
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -32,7 +32,7 @@ script.
           generateHtml(disqusArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 
diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug
index 2153b11..79430db 100644
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -58,7 +58,7 @@ script.
           findTrueUrl(githubArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 
diff --git a/layout/includes/third-party/newest-comments/remark42.pug b/layout/includes/third-party/newest-comments/remark42.pug
index 8ead708..71c2603 100644
--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -60,7 +60,7 @@ script.
           generateHtml(remark42)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 
diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug
index e362623..8615f16 100644
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -36,7 +36,7 @@ script.
           generateHtml(twikooArray)
         }).catch(function (err) {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
       }
 
diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug
index ef0bb10..6f78774 100644
--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -79,7 +79,7 @@ script.
           generateHtml(valineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
     }
 
diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug
index 565f6f4..95d17bb 100644
--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -60,7 +60,7 @@ script.
           generateHtml(walineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
       }
 
diff --git a/layout/includes/third-party/subtitle.pug b/layout/includes/third-party/subtitle.pug
index bf02b99..c409b58 100644
--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -38,7 +38,7 @@ case source
               sub.unshift(data.hitokoto, from)
               typedJSFn.init(sub)
             } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
+              document.getElementById('subtitle').textContent = data.hitokoto
             }
           })
       }
@@ -55,7 +55,7 @@ case source
             sub.unshift(con, from)
             typedJSFn.init(sub)
           } else {
-            document.getElementById('subtitle').innerHTML = con
+            document.getElementById('subtitle').textContent = con
           }
         })
       }
@@ -72,7 +72,7 @@ case source
               sub.unshift(content)
               typedJSFn.init(sub)
             } else {
-              document.getElementById('subtitle').innerHTML = result.data.content
+              document.getElementById('subtitle').textContent = result.data.content
             }
           })
         })
@@ -86,7 +86,7 @@ case source
         if (!{effect}) {
           typedJSFn.init(!{JSON.stringify(subContent)})
         } else {
-          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+          document.getElementById("subtitle").textContent = '!{subContent[0]}'
         }
       }
       typedJSFn.run(subtitleType)
\ No newline at end of file
diff --git a/package.json b/package.json
index d7ff9be..2a51097 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.8.1",
+  "version": "4.8.5",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/plugins.yml b/plugins.yml
index e1ce2f8..59d993c 100644
--- a/plugins.yml
+++ b/plugins.yml
@@ -5,7 +5,7 @@ algolia_search:
 instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.54.0
+  version: 4.55.0
 pjax:
   name: pjax
   file: pjax.min.js
@@ -37,17 +37,17 @@ disqusjs_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.14
+  version: 1.6.16
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.14.9
+  version: 2.15.4
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.14.9
+  version: 2.15.4
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -64,12 +64,12 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
@@ -113,7 +113,7 @@ instantpage:
 typed:
   name: typed.js
   file: dist/typed.umd.js
-  version: 2.0.15
+  version: 2.0.16
 pangu:
   name: pangu
   file: dist/browser/pangu.min.js
@@ -121,12 +121,12 @@ pangu:
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 5.0.15
+  version: 5.0.17
   other_name: fancyapps-ui
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 5.0.15
+  version: 5.0.17
   other_name: fancyapps-ui
 medium_zoom:
   name: medium-zoom
@@ -202,13 +202,13 @@ docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 3.3.3
+  version: 3.3.4
 docsearch_css:
   name: '@docsearch/css'
   other_name: docsearch-css
   file: dist/style.css
-  version: 3.3.3
+  version: 3.3.4
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.2.0
+  version: 6.2.2
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index a73ae2c..b9933fe 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -174,9 +174,6 @@ if $site-name-font
 .is-center
   text-align: center
 
-.copy-true
-  user-select: all
-
 .pull-left
   float: left
 
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index a0a1635..d54798c 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -75,6 +75,14 @@ $code-block
         &:hover
           border-bottom-color: var(--hl-color)
 
+    &.copy-true
+      user-select: all
+
+      & > table,
+      & > pre
+        display: block !important
+        opacity: 0
+
   .highlight-tools
     position: relative
     display: flex
diff --git a/source/js/main.js b/source/js/main.js
index e00d435..d68c51b 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -70,28 +70,17 @@ document.addEventListener('DOMContentLoaded', function () {
     const highLight = GLOBAL_CONFIG.highlight
     if (!highLight) return
 
-    const isHighlightCopy = highLight.highlightCopy
-    const isHighlightLang = highLight.highlightLang
+    const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight
     const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
-    const highlightHeightLimit = highLight.highlightHeightLimit
-    const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
-    const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+    const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined
+    const $figureHighlight = plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
 
     if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
 
-    const isPrismjs = highLight.plugin === 'prismjs'
-
-    let highlightShrinkEle = ''
-    let highlightCopyEle = ''
+    const isPrismjs = plugin === 'prismjs'
     const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
-
-    if (isHighlightShrink !== undefined) {
-      highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
-    }
-
-    if (isHighlightCopy) {
-      highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
-    }
+    const highlightShrinkEle = isHighlightShrink !== undefined ? `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>` : ''
+    const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
 
     const copy = (text, ctx) => {
       if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
@@ -100,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
           btf.snackbarShow(GLOBAL_CONFIG.copy.success)
         } else {
           const prevEle = ctx.previousElementSibling
-          prevEle.innerText = GLOBAL_CONFIG.copy.success
+          prevEle.textContent = GLOBAL_CONFIG.copy.success
           prevEle.style.opacity = 1
           setTimeout(() => { prevEle.style.opacity = 0 }, 700)
         }
@@ -108,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () {
         if (GLOBAL_CONFIG.Snackbar !== undefined) {
           btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
         } else {
-          ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
+          ctx.previousElementSibling.textContent = GLOBAL_CONFIG.copy.noSupport
         }
       }
     }
@@ -119,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
       $buttonParent.classList.add('copy-true')
       const selection = window.getSelection()
       const range = document.createRange()
-      if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
-      else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
+      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+      range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
       selection.removeAllRanges()
       selection.addRange(range)
       const text = selection.toString()
@@ -175,33 +164,29 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     }
 
-    if (isHighlightLang) {
-      if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
+    if (isPrismjs) {
+      $figureHighlight.forEach(item => {
+        if (highlightLang) {
+          const langName = item.getAttribute('data-language') || 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
           btf.wrap(item, 'figure', { class: 'highlight' })
           createEle(highlightLangEle, item)
-        })
-      } else {
-        $figureHighlight.forEach(function (item) {
+        } else {
+          btf.wrap(item, 'figure', { class: 'highlight' })
+          createEle('', item)
+        }
+      })
+    } else {
+      $figureHighlight.forEach(function (item) {
+        if (highlightLang) {
           let langName = item.getAttribute('class').split(' ')[1]
           if (langName === 'plain' || langName === undefined) langName = 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
           createEle(highlightLangEle, item, 'hl')
-        })
-      }
-    } else {
-      if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          btf.wrap(item, 'figure', { class: 'highlight' })
-          createEle('', item)
-        })
-      } else {
-        $figureHighlight.forEach(function (item) {
+        } else {
           createEle('', item, 'hl')
-        })
-      }
+        }
+      })
     }
   }
 
@@ -313,6 +298,12 @@ document.addEventListener('DOMContentLoaded', function () {
   const scrollFn = function () {
     const $rightside = document.getElementById('rightside')
     const innerHeight = window.innerHeight + 56
+    let initTop = 0
+    let isChatShow = true
+    const $header = document.getElementById('page-header')
+    const isChatBtnHide = typeof chatBtnHide === 'function'
+    const isChatBtnShow = typeof chatBtnShow === 'function'
+    const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     // 當滾動條小于 56 的時候
     if (document.body.scrollHeight <= innerHeight) {
@@ -321,19 +312,12 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // find the scroll direction
-    function scrollDirection (currentTop) {
+    const scrollDirection = currentTop => {
       const result = currentTop > initTop // true is down & false is up
       initTop = currentTop
       return result
     }
 
-    let initTop = 0
-    let isChatShow = true
-    const $header = document.getElementById('page-header')
-    const isChatBtnHide = typeof chatBtnHide === 'function'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
-    const isShowPercent = GLOBAL_CONFIG.percent.rightside
-
     const scrollTask = btf.throttle(() => {
       const currentTop = window.scrollY || document.documentElement.scrollTop
       const isDown = scrollDirection(currentTop)
@@ -492,6 +476,22 @@ document.addEventListener('DOMContentLoaded', function () {
     window.addEventListener('scroll', tocScrollFn)
   }
 
+  const modeChangeFn = mode => {
+    if (!window.themeChange) {
+      return
+    }
+
+    const turnMode = item => window.themeChange[item](mode)
+
+    Object.keys(window.themeChange).forEach(item => {
+      if (['disqus', 'disqusjs'].includes(item)) {
+        setTimeout(() => turnMode(item), 300)
+      } else {
+        turnMode(item)
+      }
+    })
+  }
+
   /**
    * Rightside
    */
@@ -504,7 +504,7 @@ document.addEventListener('DOMContentLoaded', function () {
       newEle.className = 'fas fa-sign-out-alt exit-readmode'
       $body.appendChild(newEle)
 
-      function clickFn () {
+      const clickFn = () => {
         $body.classList.remove('read-mode')
         newEle.remove()
         newEle.removeEventListener('click', clickFn)
@@ -513,8 +513,8 @@ document.addEventListener('DOMContentLoaded', function () {
       newEle.addEventListener('click', clickFn)
     },
     switchDarkMode: () => { // Switch Between Light And Dark Mode
-      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-      if (nowMode === 'light') {
+      const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+      if (willChangeMode === 'dark') {
         activateDarkMode()
         saveToLocal.set('theme', 'dark', 2)
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
@@ -523,11 +523,7 @@ document.addEventListener('DOMContentLoaded', function () {
         saveToLocal.set('theme', 'light', 2)
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
       }
-      // handle some cases
-      typeof utterancesTheme === 'function' && utterancesTheme()
-      typeof changeGiscusTheme === 'function' && changeGiscusTheme()
-      typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
-      typeof runMermaid === 'function' && window.runMermaid()
+      modeChangeFn(willChangeMode)
     },
     showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
       const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
@@ -545,9 +541,8 @@ document.addEventListener('DOMContentLoaded', function () {
     },
     hideAsideBtn: () => { // Hide aside
       const $htmlDom = document.documentElement.classList
-      $htmlDom.contains('hide-aside')
-        ? saveToLocal.set('aside-status', 'show', 2)
-        : saveToLocal.set('aside-status', 'hide', 2)
+      const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
+      saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
 
@@ -596,21 +591,16 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
-   * 複製時加上版權信息
-   */
+ * 複製時加上版權信息
+ */
   const addCopyright = () => {
     const copyright = GLOBAL_CONFIG.copyright
     document.body.oncopy = (e) => {
       e.preventDefault()
-      let textFont; const copyFont = window.getSelection(0).toString()
+      const copyFont = window.getSelection(0).toString()
+      let textFont = copyFont
       if (copyFont.length > copyright.limitCount) {
-        textFont = copyFont + '\n' + '\n' + '\n' +
-        copyright.languages.author + '\n' +
-        copyright.languages.link + window.location.href + '\n' +
-        copyright.languages.source + '\n' +
-        copyright.languages.info
-      } else {
-        textFont = copyFont
+        textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
       }
       if (e.clipboardData) {
         return e.clipboardData.setData('text', textFont)
@@ -627,7 +617,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $runtimeCount = document.getElementById('runtimeshow')
     if ($runtimeCount) {
       const publishDate = $runtimeCount.getAttribute('data-publishDate')
-      $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
+      $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`
     }
   }
 
@@ -638,7 +628,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $lastPushDateItem = document.getElementById('last-push-date')
     if ($lastPushDateItem) {
       const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
-      $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
+      $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true)
     }
   }
 
@@ -771,10 +761,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const relativeDate = function (selector) {
     selector.forEach(item => {
-      const $this = item
-      const timeVal = $this.getAttribute('datetime')
-      $this.innerText = btf.diffDate(timeVal, true)
-      $this.style.display = 'inline'
+      const timeVal = item.getAttribute('datetime')
+      item.textContent = btf.diffDate(timeVal, true)
+      item.style.display = 'inline'
     })
   }
 
@@ -789,6 +778,13 @@ document.addEventListener('DOMContentLoaded', function () {
     clickFnOfSubMenu()
     GLOBAL_CONFIG.islazyload && lazyloadImg()
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+
+    if (GLOBAL_CONFIG.autoDarkmode) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        if (saveToLocal.get('theme') !== undefined) return
+        e.matches ? modeChangeFn('dark') : modeChangeFn('light')
+      })
+    }
   }
 
   window.refreshFn = function () {
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 73dfe6b..47cf84d 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -282,7 +282,7 @@ window.addEventListener('load', () => {
       window.pjax && window.pjax.refresh(container)
     }
 
-    $loadingStatus.innerHTML = ''
+    $loadingStatus.textContent = ''
   }
 
   let loadFlag = false
diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js
index cfff352..c27db8f 100644
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -1,10 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const translate = GLOBAL_CONFIG.translate
+  const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate
   const snackbarData = GLOBAL_CONFIG.Snackbar
-  const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
-  const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
-  const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
-  const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
   let currentEncoding = defaultEncoding
   const targetEncodingCookie = 'translate-chn-cht'
   let targetEncoding =
@@ -12,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ? defaultEncoding
       : Number(saveToLocal.get('translate-chn-cht'))
   let translateButtonObject
-  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+  const isSnackbar = snackbarData !== undefined
 
   function setLang () {
     document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN'
@@ -58,12 +54,12 @@ document.addEventListener('DOMContentLoaded', function () {
     if (targetEncoding === 1) {
       currentEncoding = 1
       targetEncoding = 2
-      translateButtonObject.innerHTML = msgToTraditionalChinese
+      translateButtonObject.textContent = msgToTraditionalChinese
       isSnackbar && btf.snackbarShow(snackbarData.cht_to_chs)
     } else if (targetEncoding === 2) {
       currentEncoding = 2
       targetEncoding = 1
-      translateButtonObject.innerHTML = msgToSimplifiedChinese
+      translateButtonObject.textContent = msgToSimplifiedChinese
       isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht)
     }
     saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
@@ -104,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function () {
     translateButtonObject = document.getElementById('translateLink')
     if (translateButtonObject) {
       if (currentEncoding !== targetEncoding) {
-        translateButtonObject.innerHTML =
+        translateButtonObject.textContent =
           targetEncoding === 1
             ? msgToSimplifiedChinese
             : msgToTraditionalChinese
diff --git a/source/js/utils.js b/source/js/utils.js
index b5df288..253c8ad 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -302,5 +302,13 @@ const btf = {
     const scrollPercentRounded = Math.round(scrollPercent * 100)
     const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
     return percentage
+  },
+
+  addModeChange: (name, fn) => {
+    if (window.themeChange && window.themeChange[name]) return
+    window.themeChange = {
+      ...window.themeChange,
+      [name]: fn
+    }
   }
 }