Theme (dark mode) toggle (statamic#878)

joschuba · Jul 22, 2022 · 846db77 · 846db77
1 parent 64b97d6
commit 846db77
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -43,5 +43,23 @@ window.bodyData = function() {
     };
 }
 
+window.htmlData = function() {
+    return {
+        themePickerOpen: false,
+        themePreference: localStorage.getItem('theme') || 'system',
+        systemTheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+        setSystemTheme(theme) {
+            this.systemTheme = theme
+        },
+        setThemePreference(scheme) {
+            this.themePreference = scheme
+            localStorage.setItem('theme', theme)
+        },
+        get darkMode() {
+            return this.themePreference === 'dark' || (this.themePreference === 'system' && this.systemTheme === 'dark')
+        },
+    }
+}
+
 Alpine.start();
 window.Alpine = Alpine;
diff --git a/resources/views/layout.antlers.html b/resources/views/layout.antlers.html
@@ -1,4 +1,6 @@
-<html lang="en" class="bg-white">
+<html lang="en" class="bg-white" :class="{ dark: darkMode }"
+    x-data="htmlData()"
+    x-init="window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => setSystemTheme(e.matches ? 'dark' : 'light'))">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -26,14 +28,6 @@
     <link rel="stylesheet" href="{{ mix src='/css/tailwind.css' }}">
     <script src="{{ mix src='/js/app.js' }}" defer></script>
     <script>
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.documentElement.classList.add('dark')
-        }
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            e.matches
-                ? document.documentElement.classList.add('dark')
-                : document.documentElement.classList.remove('dark')
-        });
     </script>
 </head>
 <body class="font-sans leading-normal dark:bg-black dark:bg-none" x-data="bodyData()" x-spread="bindings">

diff --git a/resources/views/partials/nav.antlers.html b/resources/views/partials/nav.antlers.html
@@ -15,9 +15,10 @@
             {{ /nav:collection:sections }}
         </ul>
         <div class="flex items-center h-full">
-            <form class="relative hidden md:flex items-center text-sm w-[240px] h-9 m-0 rounded border-2 border-black shadow-sm md:shadow relative top-[-2px] dark:bg-gray-darkest" action="/search-results">
+            <form class="relative hidden md:flex items-center text-sm w-[240px] h-9 m-0 rounded border-2 border-black shadow-sm md:shadow relative top-[-2px] dark:bg-gray-darkest" :class="{ 'md:hidden': themePickerOpen }" action="/search-results">
                 <div id="docsearch" ref="docSearch"></div>
             </form>
+            {{ partial:theme }}
         </div>
     </div>
 </nav>

diff --git a/resources/views/partials/theme.antlers.html b/resources/views/partials/theme.antlers.html
@@ -0,0 +1,23 @@
+<div class="flex px-2 py-1 top-[-2px]" :class="{ 'bg-mint border-2 shadow rounded relative right-[-2px] w-[282px] dark:bg-gray-darkest dark:text-gray dark:border-gray-darkest': themePickerOpen }" title="Theme">
+    <div x-cloak x-show="themePickerOpen" class="flex-1 mr-4">
+        <button @click="setThemePreference('light'); themePickerOpen = false"
+                class="px-2" :class="{ 'font-bold': themePreference === 'light' }">
+            Light
+        </button>
+
+        <button @click="setThemePreference('dark'); themePickerOpen = false"
+                class="px-2" :class="{ 'font-bold': themePreference === 'dark' }">
+            Dark
+        </button>
+
+        <button @click="setThemePreference('system'); themePickerOpen = false"
+                class="px-2" :class="{ 'font-bold': themePreference === 'system' }">
+            System
+        </button>
+    </div>
+
+    <button class="relative top-[-1px]" :class="{ 'top-[1px]': themePickerOpen }" @click="themePickerOpen = !themePickerOpen">
+        <svg x-show="!darkMode" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-black"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-current"></path><path d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836" class="stroke-current"></path></svg>
+        <svg x-show="darkMode" viewBox="0 0 24 24" fill="none" class="w-6 h-6 relative top-[-2px]" :class="{ 'text-gray-lighter': themePickerOpen, 'text-gray-darker': !themePickerOpen  }"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z" class="fill-current opacity-50"></path><path d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z" class="fill-current"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z" class="fill-current"></path></svg>
+    </button>
+</div>