🏎 Zacznijmy
aktualizować konfigurację Tailwind, aby poinformować ją o potrzebie przełączania trybu ciemnego w zależności od klasy.
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}Umożliwi to pisanie bg-gray-50 dark:bg-black i wyświetlanie kolorów tła w oparciu o bieżący tryb.
<html class="dark">
<body>
<div class="bg-gray-100 dark:bg-gray-600">
<!-- ... -->
</div>
</body>
</html>Teraz spróbujmy usunąć tę zakodowaną klasę w html tagu i pobrać wartość z localStorage użycia 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'}, myślę o tym jako o prostej zmiennej i ustawieniu darkModewartości 's na wartość true false lub na podstawie wartości elementu darklocalStorage.dark
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 data we have and trigger a function.x-init You might have already guessed it. It runs an expression when a component is initialized.
Tak dobrze do tej pory? Jeśli nie, daj mi znać. Postaram się wyjaśnić w komentarzach i odpowiednio
zaktualizować ten post Dodajmy teraz przycisk, aby przełączyć motyw
<button @click="darkMode = !darkMode">
Toggle Theme
</button>🏁 Yup, that's all you need 😎
. Oto dopracowana wersja, której użyłem w HIGHSCORE.domains Po raz pierwszy używam AlpineJS i zostałem wyróżniony w Alpine.js Weekly #61 przez @hugo__df
dostał darkmode toggled powered by Alpine i TailwindUI przez @onerinas
Zostawiając tutaj kilka linków, które mogą być przydatne, jeśli chcesz wypróbować to w swoim projekcie:
- 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
