feat: add default color mode option

lepture · Feb 21, 2024 · 52e39e3 · 52e39e3
1 parent c7aa04f
commit 52e39e3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/shibuya/theme/shibuya/base.html b/src/shibuya/theme/shibuya/base.html
@@ -53,7 +53,7 @@
 
   <script>
     function setColorMode(t){let e=document.documentElement;e.setAttribute("data-color-mode",t);let a=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,s=t;"auto"===t&&(s=a?"dark":"light"),"light"===s?(e.classList.remove("dark"),e.classList.add("light")):(e.classList.remove("light"),e.classList.add("dark"))}
-    setColorMode(sessionStorage._theme||"auto");
+    setColorMode(sessionStorage._theme||"{{ theme_color_mode }}");
   </script>
   {%- block styles -%}
     {%- for css in css_files -%}

diff --git a/src/shibuya/theme/shibuya/theme.conf b/src/shibuya/theme/shibuya/theme.conf
@@ -19,6 +19,7 @@ dark_logo =
 
 # design
 page_layout = default
+color_mode = auto
 accent_color = violet
 dark_code =
 

diff --git a/static/js/theme.js b/static/js/theme.js
@@ -1,9 +1,8 @@
 const COLOR_MODES = ['auto', 'light', 'dark']
-let index = COLOR_MODES.indexOf(sessionStorage['_theme'] || 'auto')
-
 const el = document.querySelector('.js-theme')
 
 function rotateColorMode () {
+  let index = getModeIndex()
   index += 1
   if (!COLOR_MODES[index]) {
     index = 0
@@ -14,12 +13,16 @@ function rotateColorMode () {
   updateLabel(mode)
 }
 
+function getModeIndex () {
+  return COLOR_MODES.indexOf(document.documentElement.getAttribute('data-color-mode') || 'auto')
+}
+
 function updateLabel (mode) {
   const label = el.getAttribute('data-aria-' + mode)
   el.setAttribute('aria-label', label)
 }
 
 if (el) {
   el.addEventListener('click', rotateColorMode)
-  updateLabel(COLOR_MODES[index] || 'auto')
+  updateLabel(COLOR_MODES[getModeIndex()] || 'auto')
 }