npm package: @flowtitude/ft-darkmode
Description: Plugin de Tailwind CSS para modo oscuro usando @theme
Author: Flowtitude Team
Latest version: 1.0.21

# 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

```bash
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:

```js
// 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:

```css
/* 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"`:

```js
// 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

```js
// 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