Seguí un tutorial y usé Alpine js para colocar un conmutador de modo oscuro en mi sitio web. funciona bien, pero cada vez que un usuario actualiza la página, debe elegir la opción de modo oscuro nuevamente. Busqué en línea y encontré que Persist Plugin parece una solución, sin embargo, no tengo experiencia profesional y solo tengo experiencia siguiendo tutoriales en línea para construir mi sitio web, por lo que realmente no puedo hacerlo funcionar. Puede alguien ayudarme con esto? Muchas gracias :)
A continuación se muestra el código del tutorial que utilicé, es de un tutorial de Oxygen Builder:
<script src="//unpkg.com/alpinejs" defer></script> <style> .darkmode-switcher { width: 64px; height: 32px; border-radius: 80px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 2px; cursor: pointer; background-color: #191919; transition: 0.3s all ease-in-out; } .darkmode-switcher__circle { width: 28px; height: 28px; border-radius: 80px; background-color: white; transition: 0.3s all ease-in-out; } </style> <div class="mode-switcher" x-data="{ darkMode: false, switchMode: function() { this.darkMode = !this.darkMode } }"> <div class="darkmode-switcher" @click="switchMode()"> <div class="darkmode-switcher__circle"></div> </div> <template x-if="darkMode"> <style> .darkmode-switcher { background-color: white; } .darkmode-switcher__circle { background-color: black; transform: translateX(32px); } .content-wrapper { background-color: black; } .content { color: white; background-color: #191919; } body { background-color: black; } </style> </template> </div>Usé el siguiente código para modificar el video de Oxygen en YouTube.
Y funcionó. Como beneficio adicional, todo lo que ponga en estilo en la plantilla x-if también se formateará. Si usa la variable para los colores, esto ayudará a cambiarlo más fácilmente en todo su sitio.
Ejemplo:
En su color var(--clr-background)
En su hoja de estilo :root {--clr-background: hsl(0, 0%, 100%);}
En estilo bajo x-if :root {--clr-background: hsl(0, 0%, 0%);}
<script src="//unpkg.com/alpinejs" defer></script> <body x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}" x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))" x-bind:class="{ 'dark': darkMode }" > </body> <style> .darkmode-switcher { width: 64px; height: 32px; border-radius: 80px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 2px; cursor: pointer; background-color: hsl(345, 6%, 13%); transition: 0.3s all ease-in-out; } .darkmode-switcher__circle { width: 28px; height: 28px; border-radius: 80px; background-color: hsl(0, 0%, 85%); transition: 0.3s all ease-in-out; } </style> <div class="mode-switcher"> <div class="darkmode-switcher" @click="darkMode = !darkMode"> <div class="darkmode-switcher__circle"></div> </div> <template x-if="darkMode"> <style> //* Add new variable colors here *// .darkmode-switcher { background-color: hsl(0, 0%, 85%); } .darkmode-switcher__circle { background-color: hsl(345, 6%, 13%); transform: translateX(32px); } .content-wrapper { background-color: hsl(345, 6%, 13%); } .content { color: hsl(0, 0%, 85%); background-color: #191919; } </style> </template> </div>Siguiente bono, si desea detectar automáticamente el modo oscuro y activarlo. Este código detecta si es modo oscuro, y guarda que es la primera vez. Así que no se oscurece automáticamente cada vez.
Agréguelo como js.
if(!('hasThisRunBefore' in localStorage)) { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches localStorage.setItem('dark', true); localStorage.setItem("hasThisRunBefore", true); }