light-dark-toggle-con-svelte Svelte Themes

Light Dark Toggle Con Svelte

Este proyecto es un sencillo ejemplo de cómo implementar un botón de cambio entre modo claro y oscuro utilizando [Svelte](https://svelte.dev/).

#darkmode #darkmodetoggle #svelte #sveltekit #dark-con-svelte #light-dark-toggle #modo-oscuro-claro-con-svelte #toggle-con-svelte
Download

Light/Dark Toggle Button con Svelte

Este proyecto es un sencillo ejemplo de cómo implementar un botón de cambio entre modo claro y oscuro utilizando Svelte.

Resultado final 😀

Características

  • Cambio entre modo claro y oscuro: Al hacer clic en el toggle, el diseño de la página cambia dinámicamente entre los dos temas.
  • Uso de clases CSS dinámicas: Se manipulan clases CSS en el elemento <body> para aplicar los estilos correspondientes.
  • Logo de Svelte incluido: Se incluye un logo como ejemplo de cómo manejar archivos estáticos en Svelte.

Requisitos

  • Node.js (v16 o superior recomendado)
  • Vite para la configuración de desarrollo rápido

Instalación

  1. Clona este repositorio:

    git clone https://github.com/urian121/light-dark-toggle-con-svelte
cd light-dark-toggle-con-svelte

  2. Instala las dependencias:

    npm install

  3. Inicia el servidor de desarrollo:

    npm run dev

  4. Abre tu navegador en http://localhost:5173.

Estructura del Proyecto

src/
├── assets/
│   └── svelte.svg   # Logo de Svelte
├── App.svelte       # Componente principal
└── main.js          # Punto de entrada del proyecto

Comenta a otros sobre este proyecto 📢
Invita una cerveza 🍺 o un café ☕
Paypal [email protected]
Da las gracias públicamente 🤓.

No olvides SUSCRIBIRTE 👍

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes