Alpine
1<!-- Requires the Alpine Persist plugin -->
2<!-- https://alpinejs.dev/plugins/persist -->
3<div
4 x-data="{
5 darkModeEnabled: false,
6 init() {
7 // You don't get the good stuff yet.
8 // Sign up for the newsletter to get some free stuff soon.
9 },
10 }"
11 class="-m-6"
12>
13 <div class="p-6 dark:bg-black dark:text-white transition">
14 <p>Click the buttons below to turn dark mode on and off. Your preference will be stored in localStorage using the <a href="https://alpinejs.dev/plugins/persist" target="_blank" class="text-aqua-600 dark:text-aqua-400">Alpine Persist plugin</a> and reloaded when the page is refreshed.</p>
15
16 <div class="mt-6 flex items-center">
17 <button
18 class="inline-flex border border-black px-4 py-2 dark:border-gray-200 dark:text-white focus:outline-none focus:ring-4 focus:ring-aqua-400"
19 x-click="darkModeEnabled = true"
20 x-click="darkModeEnabled = true"
21 >
22 On
23 </button>
24 <button
25 class="ml-2 inline-flex border border-black px-4 py-2 dark:border-gray-200 dark:text-white focus:outline-none focus:ring-4 focus:ring-aqua-400"
26 x-click="darkModeEnabled = false"
27 >
28 Off
29 </button>
30 </div>
31 </div>
32</div>
<!-- Requires the Alpine Persist plugin -->
<!-- https://alpinejs.dev/plugins/persist -->
<div
x-data="{
darkModeEnabled: false,
init() {
// You don't get the good stuff yet.
// Sign up for the newsletter to get some free stuff soon.
},
}"
class="-m-6"
>
<div class="p-6 dark:bg-black dark:text-white transition">
<p>Click the buttons below to turn dark mode on and off. Your preference will be stored in localStorage using the <a href="https://alpinejs.dev/plugins/persist" target="_blank" class="text-aqua-600 dark:text-aqua-400">Alpine Persist plugin</a> and reloaded when the page is refreshed.</p>
<div class="mt-6 flex items-center">
<button
class="inline-flex border border-black px-4 py-2 dark:border-gray-200 dark:text-white focus:outline-none focus:ring-4 focus:ring-aqua-400"
@click="darkModeEnabled = true"
x-click="darkModeEnabled = true"
>
On
</button>
<button
class="ml-2 inline-flex border border-black px-4 py-2 dark:border-gray-200 dark:text-white focus:outline-none focus:ring-4 focus:ring-aqua-400"
@click="darkModeEnabled = false"
>
Off
</button>
</div>
</div>
</div>