Plugin DarkLight Pro para Wordpress

🎯 Características del panel:​

• ✅ 4 pestañas de configuración (General, Iconos, Colores, Avanzado)
• ✅ Vista previa en tiempo real
• ✅ Selector de posición (4 esquinas diferentes)
• ✅ Personalización de iconos con presets
• ✅ Selector de colores con color picker
• ✅ CSS personalizado
• ✅ Switches modernos para opciones booleanas

/* Transición suave para todos los elementos */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Evitar parpadeo en carga inicial */
body:not(.dark-mode-loaded) {
    transition: none !important;
}

/* Ejemplo de estilos para elementos comunes en dark mode */
.dark-mode a {
    color: #66b3ff;
}

.dark-mode a:hover {
    color: #99ccff;
}

.dark-mode .widget,
.dark-mode .card,
.dark-mode .article {
    background-color: #2d2d2d;
    border-color: #404040;
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #333;
    color: #fff;
    border-color: #555;
}

.dark-mode button {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

.dark-mode button:hover {
    background-color: #555;
}

jach12k7 dijo:

Ver el archivo adjunto 1519318

Les quiero compartir un sencillo plugin que hice con chatGPT para cambiar entre claro a oscuro.

Características:

· ✅ Switch flotante en la esquina inferior derecha
· ✅ Guarda la preferencia del usuario en localStorage
· ✅ Respeta la preferencia del sistema operativo
· ✅ Totalmente responsive
· ✅ Efectos hover y animaciones suaves
· ✅ Fácil de personalizar

Update 2.0.0:

🎯 Características del panel:​

• ✅ 4 pestañas de configuración (General, Iconos, Colores, Avanzado)
• ✅ Vista previa en tiempo real
• ✅ Selector de posición (4 esquinas diferentes)
• ✅ Personalización de iconos con presets
• ✅ Selector de colores con color picker
• ✅ CSS personalizado
• ✅ Switches modernos para opciones booleanas

CSS adicional para transiciones suaves

Agrega esto al final de tu archivo CSS o en el customizer de WordPress:

Insertar CODE, HTML o PHP:

/* Transición suave para todos los elementos */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Evitar parpadeo en carga inicial */
body:not(.dark-mode-loaded) {
    transition: none !important;
}

/* Ejemplo de estilos para elementos comunes en dark mode */
.dark-mode a {
    color: #66b3ff;
}

.dark-mode a:hover {
    color: #99ccff;
}

.dark-mode .widget,
.dark-mode .card,
.dark-mode .article {
    background-color: #2d2d2d;
    border-color: #404040;
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #333;
    color: #fff;
    border-color: #555;
}

.dark-mode button {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

.dark-mode button:hover {
    background-color: #555;
}

El plugin es completamente funcional y se integra automáticamente con tu tema de WordPress.

Link para descargarlo:
DarkLight Pro v2.0.0

Hacer clic para expandir...

BotBeta dijo:

¡Gracias por compartir tu plugin, jach12k7! Suena muy útil y bien pensado para aquellos que buscan implementar un modo oscuro en sus sitios de WordPress. Me encanta la opción de personalización y el shortcode. Seguro que muchos lo encontrarán útil. ¿Tienes planes de agregar más características en el futuro?

Hacer clic para expandir...

jach12k7 dijo:

ya he añadido una pequeña actualización con un panel para personalizarlo un poco más.

Hacer clic para expandir...