Tutorial Switcher Theme Tailwind CSS di Laravel

Membuat tombol ganti tema pada laravel dengan tailwind css? Berikut adalah tutorial membuat switcher theme tailwind css javascript reactjs di laravel 8.

Karena pada tutorial sebelumnya dark mode diterapkan secara hardcode yaitu membuat class dark pada html maka sekarang hapus class tersebut, karena pada artikel kali ini kita akan membuat tombol khusus untuk mengganti tema, silakan buka file resources/views/layouts/app.blade.php :

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

Fungsi tombol ganti tema sama seperti fungsi yang ada pada blog ini, jika saat ini Anda membaca pada perangkat desktop maka lokasinya berada di sebelah kanan atas icon matahari / bulan, sedangkan jika perangkat yang Anda gunakan mobile lokasinya ada di sebelah kiri atas, ketika Anda klik maka warnanya berubah dari light menjadi dark ataupun sebaliknya.

Untuk membuat switcher theme bisa menggunakan javascript pada umumnya seperti pada blog ini karena core nya dibuat menggunakan wordpress bukan laravel, cukup ribet jika hanya untuk membuat switcher harus install react dll pada wordpress. Namun karena tutorial ini menggunakan laravel kenapa tidak menggunakan reactjs saja untuk membuat switcher theme.

Pertama buat file resources/js/components/Switcher.js dan masukkan kode berikut :

import React, { useEffect, useState } from "react";

import ReactDOM from "react-dom";

function Switcher() {
  const [warna, setWarna] = useState(localStorage.getItem("theme"));

  const selectTheme = (value) => {
    localStorage.setItem("theme", value);

    document.querySelector("html").classList.add(localStorage.getItem("theme"));
    if (value == "dark") {
      setWarna("dark");
      document.querySelector("html").classList.remove("light");
    } else {
      setWarna("light");
      document.querySelector("html").classList.remove("dark");
    }
  };

  useEffect(() => {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      document.querySelector("html").classList.add("dark");
    } else {
      document.querySelector("html").classList.remove("dark");
    }
    // aktifkan jika ingin membuat tema sesuai dengan tema device
    // localStorage.removeItem("theme");
  }, []);

  return (
    <div className="flex items-center justify-center">
      <div className="relative inline-block w-10 mr-2 align-middle select-none">
        {warna === "dark" ? (
          <input
            onClick={() => selectTheme("light")}
            type="checkbox"
            name="toggle"
            id="toggle"
            defaultChecked
            className="absolute block w-6 h-6 transition border-4 rounded-full appearance-none cursor-pointer bg-secondary-900 border-secondary-700 toggle-checkbox focus:outline-none"
          />
        ) : (
          <input
            onClick={() => selectTheme("dark")}
            type="checkbox"
            name="toggle"
            id="toggle"
            className="absolute block w-6 h-6 transition bg-white border-4 border-gray-300 rounded-full appearance-none cursor-pointer toggle-checkbox focus:outline-none"
          />
        )}
        <label
          // htmlFor="toggle"
          className="block h-6 overflow-hidden bg-gray-200 rounded-full toggle-label"
        ></label>
      </div>
      <label className="text-xs select-none dark:text-gray-200">
        {warna == "dark" ? "Dark mode!" : "Light mode!"}
      </label>
    </div>
  );
}

export default Switcher;

if (document.querySelectorAll(".switcher")) {
  const showNodes = document.querySelectorAll(".switcher");
  showNodes.forEach((item) => {
    ReactDOM.render(<Switcher />, item);
  });
}

Panggil file switcher dengan cara buka resources/js/app.js dan tambahkan kode berikut :

require("./components/Switcher");

Sekarang jalankan perintah berikut untuk memantau perubahan yang diubah :

npm run watch

Karena fitur switcher sudah dibuat sekarang panggil class switcher ditempat yang ingin menampilkan tombol switcher, silakan buka resources/views/layouts/app.blade.php dan masukkan kode berikut setelah tulisan SUSANTOKUN.COM :

<div class="mt-2 switcher"></div>

Coba buka http://laravel-8-crud.test/articles maka akan ada tombol switch untuk mengganti tema, jika Anda klik tema akan berubah namun toggle tidak berubah maka dari itu buka resources/css/app.css dan masukkan kode berikut setelah @import "tailwindcss/utilities"; :

.toggle-checkbox:checked {
  right: 0;
}
.toggle-checkbox:checked + .toggle-label {
  @apply bg-secondary-600;
}

Karena pada awal menggunakan perintah watch maka akan ada pemberitahuan Laravel Mix Sukses dan sekarang ketika klik tombol switch maka toggle akan berpindah, jika Anda reload atau refresh posisi toogle akan sesuai dengan tema yang digunakan.

laravel-8-crud youtube

Itulah artikel tentang tutorial switcher theme tailwind css di laravel yang dapat saya sampaikan, semoga bermanfaat.