Fix dark mode switcher flash bug (#4167) (#4174)

Ref: #4167
nodejs · Oct 15, 2021 · f9b2cd0 · f9b2cd0
1 parent 245a7a9
commit f9b2cd0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/layouts/partials/html-head.hbs b/layouts/partials/html-head.hbs
@@ -34,4 +34,6 @@
   {{#each site.feeds}}
   <link rel="alternate" href="/{{ ../site.locale }}/{{ link }}" title="{{ text }}" type="application/rss+xml">
   {{/each}}
+
+  <script src="/static/js/themeSwitcher.js"></script>
 </head>
diff --git a/static/js/main.js b/static/js/main.js
@@ -48,13 +48,6 @@
 ;(function () {
   const themeAttr = 'data-theme'
   var darkThemeSwitcherElement = document.querySelector('.dark-theme-switcher')
-  var isInDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-
-  if (getTheme() == null) {
-    setTheme(isInDarkMode ? 'dark' : 'light')
-  } else {
-    setTheme(getTheme())
-  }
 
   darkThemeSwitcherElement.addEventListener('click', function () {
     var currentTheme = getTheme()

diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js
@@ -0,0 +1,19 @@
+;(function () {
+  const themeAttr = 'data-theme'
+  const isInDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  if (getTheme() == null) {
+    setTheme(isInDarkMode ? 'dark' : 'light')
+  } else {
+    setTheme(getTheme())
+  }
+
+  function setTheme (theme) {
+    document.querySelector('html').setAttribute(themeAttr, theme)
+    window.localStorage.setItem('theme', theme)
+  }
+
+  function getTheme () {
+    return window.localStorage.getItem('theme')
+  }
+})()