This content originally appeared on DEV Community and was authored by Rinas
Hey ?
Rinas here.
This is done using some Alpine JS magic ? and I really enjoyed implementing it.
? Let's start
Update your Tailwind config to let it know you can dark mode toggle based on class.
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}
This will let you write bg-gray-50 dark:bg-black and show background colours based on current mode.
<html class="dark">
<body>
<div class="bg-gray-100 dark:bg-gray-600">
<!-- ... -->
</div>
</body>
</html>
Now let's try to remove that hard coded dark class in html tag and grab the value from localStorage using Alpine
<html
x-data="{ darkMode: localStorage.getItem('dark') === 'true'} "
x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
x-bind:class="{ 'dark': darkMode }"
>
? Wait, what's going on here?
x-data="{ darkMode: localStorage.getItem('dark') === 'true' "
x-data tells the framework to initialize a new component with the following data object. In our case, the object is:
{ darkMode: localStorage.getItem('dark') === 'true'}
I think of it as a simple variable and setting darkMode's value to either true or false based on the localStorage item dark's value.
x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
$watch is a magic property (yup, that's the official terminology ?) in Alpine used to watch a data we have and trigger a function.
x-init You might have already guessed it. It runs an expression when a component is initialized.
So good so far? If not, let me know. I'll try to clarify in comments and update this post accordingly
Let's add the button to toggle the theme now.
<button @click="darkMode = !darkMode">
Toggle Theme
</button>
? Yup, that's all you need ?
Here is the polished version I used in HIGHSCORE.domains
This is my first time using AlpineJS and got featured in Alpine.js Weekly #61 by @hugo__df
highscore.domains got a darkmode toggled powered by Alpine and TailwindUI by @onerinas
Leaving few links here which might be useful if you want to try this out in your project:
TailwindCSS:
- https://tailwindcss.com/docs/installation
- https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
AlpineJS:
x-init
Runs an expression when a component is initialized.
https://github.com/alpinejs/alpine#x-init
x-data
Declares a new component scope.
https://github.com/alpinejs/alpine#x-data
x-bind
Sets the value of an attribute to the result of a JS expression.
https://github.com/alpinejs/alpine#x-bind
$watch
Will fire a provided callback when a component property you "watched" gets changed.
https://github.com/alpinejs/alpine#watch
This content originally appeared on DEV Community and was authored by Rinas
Rinas | Sciencx (2021-05-31T03:46:11+00:00) Toggle ? dark and ? sunny mode using AlpineJS, TailwindCSS and localStorage. Retrieved from https://www.scien.cx/2021/05/31/toggle-%f0%9f%8c%92-dark-and-%f0%9f%94%86-sunny-mode-using-alpinejs-tailwindcss-and-localstorage/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.