Fix color scheme changing flicker

Author: MrWillCom

.changeset/large-adults-grow.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': patch
+---
+
+Fix the flicker after page load when color scheme is different from default.

layout/_partial/head.ejs

@@ -103,6 +103,6 @@
   <link rel="stylesheet" href="<%- getCdnUrl('@waline/client', 'v2', 'dist/waline.css') %>" />
   <% } %>
 
-  <script>var ThemeCupertino = {}</script>
+  <%- js('js/head.js') %>
   <%- theme.insertions.head.ending %>
 </head>

layout/layout.ejs

@@ -23,6 +23,7 @@
     data-scroll-reveal-query="<%= theme.scroll_reveal_query %>"
     <% } %>
   >
+    <%- js('js/body-top.js') %>
     <a href="#main-content" id="skip-to-content"><%- __('skip_to_content') %></a>
     <%- partial('_partial/nav') %>
     <main id="main-content">

source/js/body-top.js

@@ -0,0 +1,2 @@
+document.body.dataset.colorScheme = ThemeCupertino.ColorScheme.get()
+ThemeCupertino.ColorScheme.updateCurrent()

source/js/head.js

@@ -0,0 +1,37 @@
+window.ThemeCupertino = {}
+
+ThemeCupertino['ColorScheme'] = new (class {
+  constructor() {
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', () => {
+        this.updateCurrent(localStorage.getItem('color-scheme') ?? 'auto')
+      })
+  }
+  get() {
+    const stored = localStorage.getItem('color-scheme') ?? 'auto'
+    this.updateCurrent(stored)
+    return stored
+  }
+  set(value) {
+    document.body.dataset.colorScheme = value
+    try {
+      localStorage.setItem('color-scheme', value)
+    } catch (err) {
+      console.error(err)
+    }
+    this.updateCurrent(value)
+    return value
+  }
+  updateCurrent(value) {
+    var current = 'light'
+    if (value == 'auto') {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        current = 'dark'
+      }
+    } else {
+      current = value
+    }
+    document.body.dataset.currentColorScheme = current
+  }
+})()

source/js/main.js

@@ -33,60 +33,19 @@
     }
   })
 
-  const ColorScheme = new (class {
-    constructor() {
-      window
-        .matchMedia('(prefers-color-scheme: dark)')
-        .addEventListener('change', () => {
-          this.updateCurrent(localStorage.getItem('color-scheme') ?? 'auto')
-        })
-    }
-    get() {
-      const stored = localStorage.getItem('color-scheme') ?? 'auto'
-      this.updateCurrent(stored)
-      return stored
-    }
-    set(value) {
-      bodyEl.setAttribute('data-color-scheme', value)
-      try {
-        localStorage.setItem('color-scheme', value)
-      } catch (err) {
-        console.error(err)
-      }
-      this.updateCurrent(value)
-      return value
-    }
-    updateCurrent(value) {
-      var current = 'light'
-      if (value == 'auto') {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          current = 'dark'
-        }
-      } else {
-        current = value
-      }
-      document.body.setAttribute('data-current-color-scheme', current)
-    }
-  })()
-
   if (document.getElementById('theme-color-scheme-toggle')) {
-    var bodyEl = document.body
     var themeColorSchemeToggleEl = document.getElementById(
       'theme-color-scheme-toggle',
     )
     var options = themeColorSchemeToggleEl.getElementsByTagName('input')
 
-    if (ColorScheme.get()) {
-      bodyEl.setAttribute('data-color-scheme', ColorScheme.get())
-    }
-
     for (const option of options) {
-      if (option.value == bodyEl.getAttribute('data-color-scheme')) {
+      if (option.value == document.body.dataset.colorScheme) {
         option.checked = true
       }
       option.addEventListener('change', ev => {
         var value = ev.target.value
-        ColorScheme.set(value)
+        ThemeCupertino.ColorScheme.set(value)
         for (const o of options) {
           if (o.value != value) {
             o.checked = false