Skip to content

Instantly share code, notes, and snippets.

@mhanberg

mhanberg/alpine-tailwind-dark-mode.html.eex

Created May 25, 2021 05:03
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mhanberg/1caeeb872ba9d1de2d5ab0243111ed53 to your computer and use it in GitHub Desktop.
Save mhanberg/1caeeb872ba9d1de2d5ab0243111ed53 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment