Pada eksplorasi mandiri ini saya memilih topik Dark Mode Toggle di Laravel Breeze.

Alasan saya memilih topik ini adalah karena sebagai pengguna web sering kali saya merasa kesulitan ketika ingin berpindah tema (dark/light) tetapi harus melakukan beberapa langkah manual. Dengan adanya toggle button, pengguna dapat lebih mudah mengganti tema hanya dengan sekali klik.

1. Membuat Project Laravel

langkah pertama adalah buat project laravel terlebih dahulu. lakukan sama seperti pada praktikum 1 yaitu

composer create-project laravel/laravel:^10.0 nama

pada window powershell saya run seperti ini: 

composer create-project laravel/laravel:^10.0 Eksplorasimandiri

Setelah itu saya navigasi ke direktori proyek Laravel yang sudah dibuat.

cd C:\laragon\www\Eksplorasimandiri

2. Install Laravel Breeze

Kemudian sekarang install breeze dengan perintah sebagai berikut:ini ganti

composer require laravel/breeze --dev

tunggu sebentar sampai selesai lalu masukkan perintah berikut

php artisan breeze:install

Di bagian pilihan, saya pilih seperti ini:

 Which Breeze stack would you like to install?

  Blade with Alpine ............................................................................................ blade

  Livewire (Volt Class API) with Alpine ..................................................................... livewire

  Livewire (Volt Functional API) with Alpine ..................................................... livewire-functional

  React with Inertia ........................................................................................... react

  Vue with Inertia ............................................................................................... vue

  API only ....................................................................................................... api

❯ blade

blade

  Would you like dark mode support? (yes/no) [no]

❯ yes

  Which testing framework do you prefer? [PHPUnit]

  PHPUnit .......................................................................................................... 0

  Pest ............................................................................................................. 1

❯ 0

0

Setelah itu breeze sudah selesai terinstall.

3. Konfigurasi .env

Langsung buka VSC dan buka folder project. Pada project, saya langsung cek env dan edit agar menyesuaikan dengan database saya dan untuk  APP_NAME saya samakan dengan nama di praktikum tugas saya yaitu recochive store jadi seperti ini awalan env selain itu tidak perlu diubah

APP_NAME="Recochive Store"

APP_ENV=local

APP_KEY=base64:sa4SM087Pwx2j8ukmRavTqANUM26QCEBntuJ85XgWvM=

APP_DEBUG=true

APP_URL=http://localhost

……

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db-sistem-toko

DB_USERNAME=root

DB_PASSWORD=

4. Jalankan Migrasi dan Build Asset

Saya buka terminal di VS Code, lalu jalankan:

php artisan migrate

lalu perintah ini

npm install

Tunggu beberapa saat lalu saya jalankan perintah ini

npm run dev

terakhir jalankan perintah berikut untuk memulai server development Laravel

php artisan serve

tunggu hingga ada output seperti berikut di terminal

 INFO  Server running on [http://127.0.0.1:8000]. 

Kalau berhasil, akan ada output server Laravel berjalan di http://127.0.0.1:8000. Dari sini saya bisa akses aplikasi di browser dan login ke dashboard. Ketika mengarahkan ke browser dia akan menampilkan laravel template biasa nanti pilih ‘dashboard’  nanti dia akan mengarahkan ke dashboard (ini berlaku ketika database yg digunakan sudah ada role user dan sudah pernah klik remember me di browser jika benar benar awal saya belum mencoba) Dapat dilihat dashboard akan langsung ke dark mode tampilan nya.

5. Edit file

Untuk menambahkan toggle maka berikut beberapa file yang harus diedit. Pastikan seperti yg dibawah.

• /tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';

import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */

export default {

    darkMode: 'class',

    content: [

        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",

        "./storage/framework/views/*.php",

        "./resources/views/**/*.blade.php",

        "./resources/js/**/*.js",

        "./resources/**/*.vue",

    ],

    theme: {

        extend: {},

    },

    plugins: [forms],

}

• /resources/js/app.js

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

// DARK MODE TOGGLE BUTTON

var themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");

var themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");

if (

    localStorage.getItem("color-theme") === "dark" ||

    (!("color-theme" in localStorage) &&

        window.matchMedia("(prefers-color-scheme: dark)").matches)

) {

    themeToggleLightIcon.classList.remove("hidden");

} else {

    themeToggleDarkIcon.classList.remove("hidden");

}

var themeToggleBtn = document.getElementById("theme-toggle");

themeToggleBtn.addEventListener("click", function () {

    themeToggleDarkIcon.classList.toggle("hidden");

    themeToggleLightIcon.classList.toggle("hidden");

    if (localStorage.getItem("color-theme")) {

        if (localStorage.getItem("color-theme") === "light") {

            document.documentElement.classList.add("dark");

            localStorage.setItem("color-theme", "dark");

        } else {

            document.documentElement.classList.remove("dark");

            localStorage.setItem("color-theme", "light");

        }

    } else {

        if (document.documentElement.classList.contains("dark")) {

            document.documentElement.classList.remove("dark");

            localStorage.setItem("color-theme", "light");

        } else {

            document.documentElement.classList.add("dark");

            localStorage.setItem("color-theme", "dark");

        }

    }

});

• /resources/views/layouts/navigation.blade.php

…

<!-- Settings + Dark Mode -->

<div class="hidden sm:flex sm:items-center sm:ms-6">

   <!-- Dark Mode Toggle Button -->

    <button id="theme-toggle" type="button"

       class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-3">

       <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"

            xmlns="http://www.w3.org/2000/svg">

            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>

            </svg>

            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"

                 xmlns="http://www.w3.org/2000/svg">

                 <path

                   d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"

                            fill-rule="evenodd" clip-rule="evenodd"></path>

             </svg>

    </button>

…

pada navigation.blade.php saya hanya menambahkan kode ini setelah navigation link yaitu di <setting dropdown>. setting dropdown saya ubah menjadi <setting + dark mode>. 

kalian bisa cek link dibawah ini yang akan mengarahkan ke ke project yg sudah saya buat.

• /resources/views/layouts/app.blade.php

pastikan layout utama punya binding ke dark. periksa kode ini biasanya ada di barisan ke-2

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

6. Rebuild Asset

Terakhir, saya rebuild asset dengan perintah:

npm run dev

lalu selanjutnya saya run perintah ini baru bisa berjalan

npm run build

Setelah itu saya masukin perintah terakhir untuk melihat hasil di browser

php artisan serve

Setelah dijalankan, sekarang di dashboard muncul toggle button untuk ganti light mode ke dark mode dan begitupun sebaliknya.

Nah, itu langkah-langkah yang saya lakukan mengikuti referensi dan juga menambahkan sedikit perubahan untuk menyesuaikan project ku. Hasil akhirnya dashboard Laravel saya bisa switch mode pakai tombol toggle di navigation bar.

7. Link github + referensi

Berikut adalah link GitHub project yang sudah saya buat:

link github

Project ini sudah terdapat fitur toggle dark mode, namun masih fresh sehingga ada beberapa file dari praktikum dan tugas yang tidak ada di sini.

referensi:

Carrasco, Klender. “How to add dark mode in Laravel (with toggle button).” Medium, 14 May 2024, https://medium.com/@marcosklender/dark-mode-in-laravel-breeze-541f79cf1162 . Accessed 25 September 2025.