🏎 Давайте почнемо
оновлювати конфігурацію Tailwind, щоб повідомити їй, що потрібен перемикач темного режиму на основі класу.
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}Це дозволить вам писати bg-gray-50 dark:bg-black та показувати кольори фону на основі поточного режиму.
<html class="dark">
<body>
<div class="bg-gray-100 dark:bg-gray-600">
<!-- ... -->
</div>
</body>
</html>Тепер давайте спробуємо видалити цей жорстко закодований клас у html тезі та отримати значення від localStorage використання 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'}, я думаю про нього як про просту змінну та встановлення darkModeзначення на будь-якому true або false на основі значення елемента localStoragedark.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.
Так добре поки що? Якщо ні, дайте мені знати. Я спробую уточнити в коментарях і відповідно оновити цю публікацію
Давайте додамо кнопку, щоб переключити тему зараз.
<button @click="darkMode = !darkMode">
Toggle Theme
</button>🏁 Yup, that's all you need 😎
Ось полірована версія, яку я використовував у HIGHSCORE.domains Це мій перший раз, коли я використовував AlpineJS і був представлений в Alpine.js Weekly #61 від @hugo__df
отримав темний режим, що працює на Alpine та TailwindUI від @onerinas
Залишивши тут кілька посилань, які можуть бути корисними, якщо ви хочете спробувати це у своєму проекті:
- 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
