Minimalist Dark Mode - Tailwind Config

by oktaviardi pratama

HTML

<script src="https://cdn.tailwindcss.com"></script>

<script>
  tailwind.config = {
    darkMode: 'class', 
    theme: {
      extend: {
        colors: {
          // 60% Dominan: Slate gelap
          darkbg: {
            DEFAULT: '#0f172a', 
            surface: '#1e293b', 
            elevated: '#334155', 
          },
          // 30% Sekunder: Tipografi & Kontras
          text: {
            primary: '#f8fafc', 
            secondary: '#94a3b8', 
            muted: '#64748b', 
          },
          // 10% Aksen: Mint/Emerald Modern
          accent: {
            DEFAULT: '#10b981', 
            hover: '#059669', 
            light: '#34d399', 
          }
        },
        fontFamily: {
          sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        }
      }
    }
  }
</script>

<div class="max-w-md w-full bg-darkbg-surface border border-darkbg-elevated rounded-2xl p-6 shadow-2xl space-y-6">
  
  <div class="space-y-1">
    <div class="flex items-center justify-between">
      <span class="text-xs font-semibold uppercase tracking-wider text-accent">
        Tailwind Config Active
      </span>
      <span class="h-2 w-2 rounded-full bg-accent animate-pulse"></span>
    </div>
    <h1 class="text-xl font-bold tracking-tight text-text-primary">
      Minimalist Dark Mode
    </h1>
    <p class="text-sm text-text-secondary">
      Sistem warna modern berbasis arsitektur 60-30-10.
    </p>
  </div>

  <div class="space-y-3">
    <h2 class="text-xs font-semibold text-text-muted uppercase tracking-wider">
      Palet Warna Berdasarkan Kegunaan
    </h2>
    <div class="grid grid-cols-3 gap-2">
      <div class="bg-darkbg border border-darkbg-elevated p-3 rounded-lg text-center">
        <div class="text-xs font-bold">60%</div>
        <div class="text-[10px] text-text-secondary mt-1">Background</div>
      </div>
      <div class="bg-darkbg-elevated p-3 rounded-lg text-center">
   ...

JavaScript

tailwind.config = {
      // Mengaktifkan fitur dark mode berbasis class selector
      darkMode: 'class', 
      theme: {
        extend: {
          colors: {
            // 60% Dominan: Slate gelap yang sangat bersih dan nyaman di mata
            darkbg: {
              DEFAULT: '#0f172a', // slate-900 (Background utama)
              surface: '#1e293b', // slate-800 (Card, sidebar, topbar)
              elevated: '#334155', // slate-700 (Hover state / border)
            },
            // 30% Sekunder: Tipografi dan elemen pendukung dengan kontras tinggi
            text: {
              primary: '#f8fafc', // slate-50 (Teks utama/Headline)
              secondary: '#94a3b8', // slate-400 (Body text/Subheadline)
              muted: '#64748b', // slate-500 (Keterangan kecil/Disabled)
            },
            // 10% Aksen: Warna Emerald/Mint yang modern, segar, dan minimalis
            accent: {
              DEFAULT: '#10b981', // emerald-500 (Tombol, link aktif, border highlight)
              hover: '#059669', // emerald-600
              light: '#34d399', // emerald-400
            }
          },
          fontFamily: {
            // Font sans-serif modern yang clean untuk interface minimalis
            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
          }
        }
      }
    }