mhanberg · May 25, 2021 05:03
diff --git a/alpine-tailwind-dark-mode.html.eex b/alpine-tailwind-dark-mode.html.eex
 <!DOCTYPE html>
 <html lang="en" class="dark">
  <head><!-- head stuff --></head>
  <body class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-grey-200 font-sans transition transition-colors ease-out">
    <main role="main" class="container mx-auto">
      <div x-data="{text: ['Light', 'Dark']}">
        <button
          class="border p-2 font-bold bg-gray-900 dark:bg-white text-white dark:text-grey-900"
          @click="document.documentElement.classList.toggle('dark'); text = text.reverse()"
          x-text="text[0]"
        >
          Light
        </button>
      </div>

      <%= @inner_content %>
    </main>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" class="dark">
	<head><!-- head stuff --></head>
	<body class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-grey-200 font-sans transition transition-colors ease-out">
	<main role="main" class="container mx-auto">
	<div x-data="{text: ['Light', 'Dark']}">
	<button
	class="border p-2 font-bold bg-gray-900 dark:bg-white text-white dark:text-grey-900"
	@click="document.documentElement.classList.toggle('dark'); text = text.reverse()"
	x-text="text[0]"
	>
	Light
	</button>
	</div>

	<%= @inner_content %>
	</main>
	</body>
	</html>