FT Dark Mode

Un plugin de Tailwind CSS para implementar un modo oscuro con inversión automática de escalas de colores.

Características

• Inversión automática de escalas de colores en modo oscuro
• El color 50 toma el valor del 950, el 100 toma el valor del 900, etc.
• El color 500 se mantiene igual para preservar el color principal
• Compatible con la clase .dark-mode y el atributo [data-theme="dark"]
• Configuración de colores base para texto y fondo
• Personalizable para diferentes paletas de colores

Instalación

npm install @flowtitude/ft-darkmode

Uso

Método 1: Configuración en tailwind.config.js (Tradicional)

Añade el plugin a tu configuración de Tailwind CSS:

// tailwind.config.js
module.exports = {
  // ... otras configuraciones
  plugins: [
    // ... otros plugins
    require('@flowtitude/ft-darkmode'),
  ],
  // Opcional: configuración personalizada
  flowtitudeDarkMode: {
    // Paletas de colores a invertir (por defecto: primary, secondary, neutral)
    colorPalettes: ['primary', 'secondary', 'neutral', 'accent'],
  }
}

Método 2: Usando la directiva @plugin (Tailwind 4.1+)

Puedes cargar el plugin directamente desde tu archivo CSS principal:

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Cargar el plugin directamente desde CSS */
@plugin @flowtitude/ft-darkmode;

/* Resto de tus estilos CSS */

Esta es una de las nuevas características de Tailwind 4.1 que permite cargar plugins directamente desde CSS sin necesidad de modificar el archivo de configuración.

Cómo funciona

El plugin genera automáticamente variables CSS para el modo oscuro que invierten las escalas de colores definidas en tu tema de Tailwind. Por ejemplo:

• En modo claro: --color-primary-50 es un color muy claro
• En modo oscuro: --color-primary-50 toma el valor de --color-primary-950 (muy oscuro)

Esto permite que los elementos mantengan su aspecto visual coherente en ambos modos, sin necesidad de definir manualmente los colores para el modo oscuro.

Activación del modo oscuro

Para activar el modo oscuro, añade la clase .dark-mode al elemento html o el atributo data-theme="dark":

// JavaScript para alternar el modo oscuro
document.documentElement.classList.toggle('dark-mode');
// O usando el atributo data-theme
document.documentElement.setAttribute('data-theme', 'dark');

Ejemplo de implementación

// Código JavaScript para implementar un toggle de modo oscuro
const themeToggle = document.getElementById('theme-toggle');

if (themeToggle) {
  themeToggle.addEventListener('click', () => {
    // Alternar la clase dark-mode
    document.documentElement.classList.toggle('dark-mode');
    
    // Alternar el atributo data-theme
    const isDark = document.documentElement.classList.contains('dark-mode');
    if (isDark) {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
    
    // Guardar preferencia en localStorage
    localStorage.setItem('dark-mode', isDark ? 'true' : 'false');
  });
  
  // Comprobar preferencia guardada
  const darkMode = localStorage.getItem('dark-mode') === 'true';
  if (darkMode) {
    document.documentElement.classList.add('dark-mode');
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}

Licencia

MIT