nightwinnd
nightwind es un plugin para Tailwind CSS que facilita la implementación de un modo oscuro en proyectos web de manera eficiente y estilizada.
Este plugin se caracteriza por ofrecer una transición suave entre los modos claro y oscuro, permitiendo a los desarrolladores personalizar el esquema de colores para ambos modos sin necesidad de escribir código adicional complejo.
Instalación
Este plugin tambien es algo especial, ya que por una parte aunque tiene un funcionamiento automático, puede requerir de algo de configuración para adaptarlo a tus necesidades, además de tener que añadir un selector para hacer el cambio entre modo normal y oscuro.
...
import nightwind from https://esm.sh/nightwind
...
/**
* @type {import('lodash').merge}
*/
const _merge = require('lodash.merge');
/**
* The Tailwind CSS configuration required by the SIUL plugin.
*
* @type {import('tailwindcss').Config}
*/
let siul = {};
/* The autogenerated Tailwind CSS configuration from the Wizard goes below. */
//-@-wizard
/* Your custom Tailwind CSS configuration goes below. */
/**
* @type {import('tailwindcss').Config}
*/
let presetConfig = {
darkMode: 'class',
theme: {
extend: {
},
},
plugins: [
...
nightwind,
...
],
corePlugins: {
preflight: false,
}
};
/* That's all, stop editing! Happy building. */
_merge(siul, presetConfig);...
import nightwind from https://esm.sh/nightwind
...
export default {
darkMode: 'class',
theme: {
extend: {
}
},
plugins: [
...
nightwind,
...
],
corePlugins: {
preflight: false,
}
}Tal como se ve en el codigo anterior, este plugin de forma predeterminada es muy sencillo de instalar, solo necesitaremos habilitar el modo oscuro, que por defecto en todas las configuraciones que mostramos siempre esta presente, y por último añadir el selector en una plantilla de bricks como el header o footer para que este presente en todo el sitio. Si lo prefieres puedes añadir un snippet para que añada el codigo a todas las paginas sin necesidad de hacerlo en una plantilla
A continuación mostramos un código de ejemplo
snippet para copiar
function ft_darkmode_selector() {
echo "
<div id='theme-toggle'>
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z' fill='currentColor'></path>
</svg>
<script>
const MOON_SVG = `<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z' fill='currentColor' /></svg>`;
const SUN_SVG = `<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z' fill='#fff' /><path fill-rule='evenodd' clip-rule='evenodd' d='M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z' fill='#fff' /></svg>`;
if (!document.documentElement.classList.contains('nightwind')) {
document.documentElement.classList.add('nightwind');
}
const themeToggleButton = document.getElementById('theme-toggle');
let theme = localStorage.getItem('nightwind-mode') || 'light';
theme === 'light' ? setLightTheme() : setDarkTheme();
function setDarkTheme() {
document.documentElement.classList.add('dark');
themeToggleButton.innerHTML = SUN_SVG;
localStorage.setItem('nightwind-mode', 'dark');
theme = 'dark';
}
function setLightTheme() {
document.documentElement.classList.remove('dark');
themeToggleButton.innerHTML = MOON_SVG;
localStorage.setItem('nightwind-mode', 'light');
theme = 'light';
}
themeToggleButton.addEventListener('click', () => {
if (theme === 'light') {
setDarkTheme();
} else {
setLightTheme();
}
});
(function() {
function getInitialColorMode() {
const persistedColorPreference = window.localStorage.getItem('nightwind-mode');
const hasPersistedPreference = typeof persistedColorPreference === 'string';
if (hasPersistedPreference) {
return persistedColorPreference;
}
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const hasMediaQueryPreference = typeof mql.matches === 'boolean';
if (hasMediaQueryPreference) {
return mql.matches ? 'dark' : 'light';
}
return 'light';
}
getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');
})()
</script>
</div>
";
return;
}
add_action( 'bricks_after_header', 'ft_darkmode_selector' );En general el plugin funciona invirtiendo los valores de los colores que usas en tus clases, por ejemplo la clase text-red-800 se convertira en text-red-200 y viceversa.
Hay veces que quizas las cosas no funcionan como esperas, sobre todo en los fondos, ya que si no ponemos explictamente en una sección o pagina el color de fondo bg-white, no hara su conversión al modo oscuro adecuadamente. Esto es importante tenerlo en cuenta.
Nightwind es completamente. Puedes administrar completamente el modo oscuro en tu archivo de configuración tailwind.config.js, con un control detallado en cada aspecto y al mismo tiempo asegurando la consistencia de tu diseño.
Nightwind también funciona con colores personalizados e incluso puedes configurar la duración en la transición y establecer escalas de color personalizadas.
Puedes usar la variante dark: para anular la configuración de tailwind para cualquier elemento.
Personalización
Pudes establecer que clases se ven afectadas por el modo oscuro de la siguiente forma:
theme: {
nightwind: {
colorClasses: [
"gradient",
"ring",
"ring-offset",
"divide",
"placeholder",
],
},
...Establecer la duración de la transición entre los modo oscuro y normal
theme: {
nightwind: {
transitionDuration: "500ms", // default '300ms'
},
...O bien desactivar la transición
theme: {
nightwind: {
transitionDuration: false, // default '300ms'
},
...Por último también podrías definir sobre que clases aplicar la transición
theme: {
nightwind: {
transitionClasses: ["bg", "ring"], // default ['text, 'bg', 'border']
},
...Cómo crear escalas de color personalizadas
Mediante configuración podemos definir cómo uno o más pesos de color se convierten en modo oscuro. Tenga en cuenta que esto afecta a todas las clases de color.
theme: {
nightwind: {
colorScale: {
100: 900, // default 800
},
},
...Reduciendo los ajustes
Este ajuste nos permite desechar los valores de 50 y 950 de fomra que se comporten como 100 y 900 respectivamente.
Este comportamiento ademas tiene el siguiente efecto:
- Hace que los colores -800 y -900 invertidos sean más oscuros y más diferentes entre sí.
- los colores -500 permanecen iguales tanto en el modo oscuro como en el claro.
theme: {
nightwind: {
colorScale: {
preset: "reduced",
},
},
...Esto corresponde a la siguiente escala personalizada:
theme: {
nightwind: {
colorScale: {
50: 900,
100: 900,
200: 800,
300: 700,
400: 600,
500: 500,
600: 400,
700: 300,
800: 200,
900: 100,
950: 100,
},
},
...Mapeo de colores
Mediante esta opción de configuración podemos personalziar completamente la equivalencia entre colores del modo claro y oscuro sin seguir ninguna regla. Veamos un ejemplo:
theme: {
nightwind: {
colors: {
white: "gray.900",
black: "gray.50",
red: {
100: "#1E3A8A", // or 'blue.900'
500: "#3B82F6", // or 'blue.500'
900: "#DBEAFE", // or 'blue.100'
},
primary: "var(--secondary)",
secondary: "var(--primary)",
},
},
},
...Hay dos formas principales de asignar colores en Nightwind: usando colores individuales o clases de colores.
Sintaxis
Puede utilizar la siguiente sintaxis para especificar colores:
- Colores individuales: en hexadecimal ‘#fff’
- Códigos de color basados en Tailwind ‘red.100’
- O usando variables CSS ‘var(–primary)’