Estoy tratando de implementar la información sobre herramientas de tippy.js y cambiar el tema en función del valor de almacenamiento local darkMode como una directiva personalizada de AlpineJs .
El siguiente código funciona más o menos bien con el último bit de que si alterno el interruptor de modo oscuro, que cambia el valor del elemento localStorage local de darkMode , necesito una actualización de página para obtener el nuevo valor.
¿Cómo puedo obtener el valor ( JSON.parse(localStorage.getItem('darkMode')) ) mientras lo cambio?
document.addEventListener('alpine:init', () => { Alpine.directive('tooltip', (el, {expression, modifiers}) => { tippy(el, { content: expression, placement: modifiers[0] ?? 'auto', theme: JSON.parse(localStorage.getItem('darkMode')) ?'blue':'light-border' }) }) }) <button type="button" x-tooltip.left="I'm a tooltip">Hover me</button> <body class="font-sans antialiased h-full" x-data="{'darkMode': false}" x-init=" darkMode = JSON.parse(localStorage.getItem('darkMode')); $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))" x-cloak > <!-- some html --> </body> <input id="toggle" type="checkbox" :value="darkMode" @change="darkMode = !darkMode"/>Como ve una instancia de localStorage y el almacenamiento local no es reactivo. Después de crear una instancia de Tippy.js, necesitamos usar la propiedad _tippy en cada elemento si queremos cambiar una propiedad. Para hacerlo un poco más fácil, modifiqué la directiva de información sobre herramientas para agregar una información sobre tooltips de clase personalizada, que usamos para recorrer cada instancia de Tippy.js.
document.addEventListener('alpine:init', () => { Alpine.directive('tooltip', (el, { expression, modifiers }) => { tippy(el, { content: expression, placement: modifiers[0] ?? 'auto', theme: JSON.parse(localStorage.getItem('darkMode')) ? 'blue' : 'light-border' }) el.classList.add('tooltips') }) }) Y en $watch magic, usamos la clase de información sobre tooltips para encontrar todas las instancias de Tippy.js y establecer el nuevo tema en ellas.
<body class="font-sans antialiased h-full" x-data="{'darkMode': false}" x-init=" darkMode = JSON.parse(localStorage.getItem('darkMode')); $watch('darkMode', value => { localStorage.setItem('darkMode', JSON.stringify(value)) Array.from(document.querySelectorAll('.tooltips')).forEach( el => el._tippy.setProps({ theme: value ? 'blue' : 'light-border' })) })" x-cloak > <!-- some html --> </body>