Menerapkan Dark Mode Tailwind di Laravel

Dark mode tailwind css di laravel, cara membuat tema dark di project laravel crud menggunakan tailwind css, berikut adalah tutorial menerapkan dark mode tailwind css di laravel 8. Sebagai project awal silakan Anda ikuti tutorial crud laravel 8 dengan tailwind css atau unduh source code nya [ laravel-8-crud ].

Untuk menerapkan dark mode menggunakan tailwind css buka tailwind.config.js dan ubah bagian darkMode yang awalnya false menjadi class. Bisa juga mengubahnya menjadi media, namun untuk keperluan pembelajaran mari gunakan class untuk melihatnya secara langsung. Kemudian jalankan perintah berikut untuk generate style dari dark mode nya :

npm run dev

Buka resources/views/layouts/app.blade.php dan tambahkan class dark pada html seperti pada kode berikut :

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">

Sekarang fungsi dari dark mode sudah bisa dilihat, mari ubah beberapa class yang diperlukan untuk mengubahnya ke mode dark.

Buka resources/views/layouts/app.blade.php dan tambahkan class berikut :

<body class="font-sans antialiased text-gray-800 bg-secondary-50 dark:bg-secondary-900">
  <div class="container h-full max-w-4xl p-4 mx-auto md:p-6">
    <header class="flex flex-col items-center justify-center">
      <img src="{{ asset('avatar192.png') }}"
        class="w-32 h-32 rounded-full shadow-md cursor-not-allowed sm:w-40 sm:h-40 md:w-44 md:h-44"
        alt="avatar">
      <div class="my-2 text-center sm:my-4">
        <h1 class="text-2xl font-medium leading-snug text-blue-500">Laravel 8 CRUD TailwindCSS</h1>
        <a href="https://www.susantokun.com/"
          target="_blank"
          rel="noopener noreferrer"
          class="text-base text-gray-600 dark:text-gray-400 dark:hover:text-red-400 hover:text-red-500">SUSANTOKUN.COM</a>
      </div>
    </header>
    <main>
      {{ $slot }}
    </main>
  </div>

  @stack('scripts')
</body>

Keterangan :

Bagian “dark:bg-secondary-900” menandakan bahwa yang awalnya background secondary-50 menjadi background secondary-800 pada mode dark
Bagian “dark:text-gray-400 dark:hover:text-red-400” menandakan bahwa warna text menjadi lebih terang dan hover menjadi lebih terang saat mode dark agar mudah terbaca

Silakan lakukan hal yang sama untuk semua file yang ada di resources/views/articles, baik itu warna border, warna background dan warna text. Maka tampilannya akan seperti gambar di bawah :

Pada tutorial berikutnya yaitu besok jam 6 pagi saya posting artikel tentang tutorial switcher theme yaitu membuat tombol untuk mengganti tema secara langsung menggunakan reactjs.

Itulah artikel tantang menerapkan dark mode tailwind css pada project laravel crud, semoga bermanfaat.