How to Use Dark Mode in Laravel 9 Inertia Vue 3

In this section we will see how to use dark mode in laravel 9 inertia vue 3 with using vueuse. For dark mode we will use tailwind css and vue use, first we need to install & setup laravel breeze for inertia, you can also use laravel jetstream.


Laravel 9 Inertia Vue 3 with Tailwind CSS Dark Mode

Create Laravel Project.

composer create-project --prefer-dist laravel/laravel inertia-darkmode

Install laravel breeze via composer

composer require laravel/breeze --dev

install inertia vue 3

php artisan breeze:install vue

install & run npm

npm install && npm run dev

run below command to migrate

php artisan migrate

Run vite

npm run dev


Install VueUse in laravel Inertia For Dark Mode

Run below command install vueuse.

npm i @vueuse/core

Add darkMode class in tailwind.config.js.

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};


You can use dark mode anywhere in inertia vue with Vueuse Dark mode.

<script setup>
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<template>
    <button
        @click="toggleDark()"
        class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700"
    >
        Dark Toggle
    </button>
</template>

lets use Dashboard.vue.

js/Pages/Dashboard.vue

<script setup>
import { useDark, useToggle } from '@vueuse/core'
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head } from "@inertiajs/inertia-vue3";

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Laravel 9 Inertia vue 3 Dark mode
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        
                        <button @click="toggleDark()" class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700">Dark Toggle</button>
                    </div>
                </div>
                <div class="mt-6">
                    <a
                        href="#"
                        class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
                    >
                        <h5
                            class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
                        >
                            Noteworthy technology acquisitions 2021
                        </h5>
                        <p class="font-normal text-gray-700 dark:text-gray-400">
                            Here are the biggest enterprise technology
                            acquisitions of 2021 so far, in reverse
                            chronological order.
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

Before dark mode.

laravel inertia dark mode toggle

laravel inertia dark mode toggle

After click dark mode toggle button.

laravel 9 inertia vue 3 dark mode switch

laravel 9 inertia vue 3 dark mode switch