Dark Mode met Tailwind CSS

Dark mode is niet meer optioneel - het is een must-have feature. In dit artikel laat ik zien hoe je een premium dark theme implementeert met Tailwind CSS, inclusief glassmorphism en glow effecten.

1. CSS Custom Properties Setup

Begin met het definieren van je design tokens als CSS custom properties. Dit maakt het makkelijk om kleuren consistent te gebruiken en later aan te passen.

:root {
    --color-bg-primary: #0a0a0f;
    --color-bg-surface: #1e293b;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-accent-cyan: #06b6d4;
    --color-accent-gold: #fbbf24;
}

2. Tailwind Config Uitbreiden

Voeg je custom kleuren toe aan de Tailwind configuratie zodat je ze kunt gebruiken met utility classes.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
        },
        secondary: {
          400: '#94a3b8',
          800: '#1e293b',
          900: '#0f172a',
        },
      },
    },
  },
}

3. Glassmorphism Effecten

Glassmorphism geeft een premium, moderne look. Combineer backdrop-blur met semi-transparante achtergronden.

.glass {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

4. Glow Effecten

Subtiele glow effecten geven een futuristische, premium uitstraling. Gebruik box-shadow met je accent kleur.

.glow {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
}

.text-glow {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

5. Gradient Text

Gradient text is een populaire techniek voor headings in dark themes. Het voegt visueel interesse toe zonder overwhelming te zijn.

.text-gradient-primary {
    background: linear-gradient(135deg, #22d3ee, #06b6d4, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Gradient Text Voorbeeld

Tips voor een Premium Dark Theme

• Gebruik nooit pure black (#000) - ga voor zeer donkere grays
• Voeg subtiele noise texture toe voor diepte (2-3% opacity)
• Gebruik accent kleuren spaarzaam voor maximum impact
• Test contrast ratios voor accessibility

Conclusie

Een goed dark theme gaat verder dan alleen kleuren inverteren. Met de juiste combinatie van subtle effecten, doordachte kleurkeuze en aandacht voor detail creeer je een premium ervaring die gebruikers waarderen.