PHPackages                             jeremykenedy/laravel-darkmode-toggle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. jeremykenedy/laravel-darkmode-toggle

ActiveLibrary[Utility & Helpers](/categories/utility)

jeremykenedy/laravel-darkmode-toggle
====================================

A standalone dark mode toggle component for Laravel with multi-framework support (Tailwind, Bootstrap 5, Bootstrap 4) and multiple frontend options (Blade, Livewire, Vue, React, Svelte).

v1.2.0(2mo ago)12MITPHPPHP ^8.2|^8.3CI passing

Since Mar 28Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/jeremykenedy/laravel-darkmode-toggle)[ Packagist](https://packagist.org/packages/jeremykenedy/laravel-darkmode-toggle)[ RSS](/packages/jeremykenedy-laravel-darkmode-toggle/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (4)Dependencies (7)Versions (7)Used By (0)

    ![Laravel Dark Mode Toggle](art/banner-light.svg)

A standalone dark mode toggle component for Laravel with Light, Dark, and System modes,
localStorage persistence, optional server-side sync, and full CSS/frontend framework parity.

 [![Total Downloads](https://camo.githubusercontent.com/8803714636f50c0b3b12556be0597281f2bb68da5bb9616ba9ab213054073c60/68747470733a2f2f706f7365722e707567782e6f72672f6a6572656d796b656e6564792f6c61726176656c2d6461726b6d6f64652d746f67676c652f642f746f74616c2e737667)](https://packagist.org/packages/jeremykenedy/laravel-darkmode-toggle) [![Latest Stable Version](https://camo.githubusercontent.com/c07d39ded5c25dfcf55ea08ea9e3796200732f5d1cfffefe10c6888d44b2d3bc/68747470733a2f2f706f7365722e707567782e6f72672f6a6572656d796b656e6564792f6c61726176656c2d6461726b6d6f64652d746f67676c652f762f737461626c652e737667)](https://packagist.org/packages/jeremykenedy/laravel-darkmode-toggle) [![Tests](https://github.com/jeremykenedy/laravel-darkmode-toggle/actions/workflows/tests.yml/badge.svg)](https://github.com/jeremykenedy/laravel-darkmode-toggle/actions) [![StyleCI](https://camo.githubusercontent.com/df5af714454a5470442d477b30aacb18349a561ea4b3d6ac1adc9ef7874df505/68747470733a2f2f6769746875622e7374796c6563692e696f2f7265706f732f313139343739383338362f736869656c643f6272616e63683d6d61696e)](https://github.styleci.io/repos/1194798386?branch=main) [![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT)

Table of Contents
-----------------

[](#table-of-contents)

- [Framework Support](#framework-support)
- [Requirements](#requirements)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Features](#features)
- [Configuration](#configuration)
- [Server-Side Persistence](#server-side-persistence)
- [Changing Frameworks](#changing-frameworks)
- [Artisan Commands](#artisan-commands)
- [How It Works](#how-it-works)
- [Testing](#testing)
- [License](#license)

Framework Support
-----------------

[](#framework-support)

Every CSS and frontend combination is fully supported with identical features:

Blade + Alpine.jsLivewire 3Vue 3React 18Svelte 4**Tailwind v4**✅✅✅✅✅**Bootstrap 5**✅✅✅✅✅**Bootstrap 4**✅✅✅✅✅**15 combinations. Zero feature gaps.**

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 12 or 13
- One CSS framework: Tailwind v4, Bootstrap 5, or Bootstrap 4
- One frontend: Blade + Alpine.js, Livewire 3, Vue 3, React 18, or Svelte 4

Installation
------------

[](#installation)

```
composer require jeremykenedy/laravel-darkmode-toggle
php artisan darkmode:install
```

The interactive installer will prompt you to select your CSS and frontend frameworks.

### Non-Interactive Install

[](#non-interactive-install)

```
php artisan darkmode:install --css=tailwind --frontend=blade
```

> **Note:** If the package is already installed, the install command will warn you and recommend using `darkmode:update` instead. You can force a fresh reinstall with `--force`, but this will overwrite your config and published views.

Quick Start
-----------

[](#quick-start)

### 1. Add the init script to ``

[](#1-add-the-init-script-to-head)

Prevents flash of wrong theme on page load:

```

    @include('darkmode::init-script')

```

### 2. Add the toggle component

[](#2-add-the-toggle-component)

**Blade (with Alpine.js):**

```

```

**Livewire:**

```

```

**Vue:**

```

import DarkmodeToggle from './vendor/darkmode-toggle/DarkmodeToggle.vue'

```

**React:**

```
import DarkmodeToggle from './vendor/darkmode-toggle/DarkmodeToggle'

export default function Nav() {
    return
}
```

**Svelte:**

```

import DarkmodeToggle from './vendor/darkmode-toggle/DarkmodeToggle.svelte'

```

Features
--------

[](#features)

- **Three modes**: Light, Dark, System (follows OS preference)
- **Instant switching**: Persists to `localStorage`, no page reload
- **FOUC prevention**: Init script runs synchronously in `` before paint
- **Server-side sync**: Optionally saves preference to user profile via PUT/POST
- **Class-based**: Adds/removes `dark` class on `` element
- **System tracking**: Listens for OS preference changes in real time
- **Configurable**: Every aspect via `config/darkmode.php` and ENV variables

Configuration
-------------

[](#configuration)

```
php artisan vendor:publish --tag=darkmode-config
```

Key options in `config/darkmode.php`:

OptionDefaultDescription`strategy``class`Dark mode strategy`class_name``dark`Class added to ```default``system`Default mode (light/dark/system)`storage_key``theme`localStorage key`persist_to_server``true`Save to DB when authenticated`persist_route``/profile/dark-mode`Server persistence endpoint`persist_method``PUT`HTTP method for persistence`persist_field``dark_mode`Request/DB field name`css_framework``null`null = inherit from `ui-kit.css_framework`Server-Side Persistence
-----------------------

[](#server-side-persistence)

The package includes a route `PUT /darkmode/preference` that saves the preference to the user's profile. To use your own route:

```
'persist_route' => '/profile/dark-mode',
'routes' => ['enabled' => false],
```

The toggle sends a JSON request:

```
{ "dark_mode": "dark" }
```

Changing Frameworks
-------------------

[](#changing-frameworks)

After initial installation, use the **update** or **switch** commands to change your CSS or frontend framework without losing your configuration.

### Update (Interactive)

[](#update-interactive)

The update command shows the same stepped prompts as the installer, letting you walk through framework selection:

```
php artisan darkmode:update
```

Or pass options directly:

```
php artisan darkmode:update --css=bootstrap5
php artisan darkmode:update --frontend=vue
php artisan darkmode:update --css=tailwind --frontend=livewire
```

### Switch (Quick)

[](#switch-quick)

The switch command is a shorthand for changing one or both frameworks in a single command:

```
php artisan darkmode:switch --css=bootstrap5
php artisan darkmode:switch --frontend=livewire
php artisan darkmode:switch --css=tailwind --frontend=vue
```

Both commands update your `.env` file and clear the config/view caches. After switching, run:

```
npm run build
```

Artisan Commands
----------------

[](#artisan-commands)

CommandDescription`darkmode:install`Fresh install with interactive prompts. Detects existing installation and warns before overwriting.`darkmode:update`Update framework selection with interactive prompts. Safe, does not overwrite config.`darkmode:switch`Quick framework switch via flags. `--css` and/or `--frontend` required.### Install Options

[](#install-options)

FlagDescription`--css=`CSS framework: `tailwind`, `bootstrap5`, `bootstrap4``--frontend=`Frontend: `blade`, `livewire`, `vue`, `react`, `svelte``--force`Skip reinstall confirmation when already installedHow It Works
------------

[](#how-it-works)

1. **Init script** runs synchronously in ``, reads `localStorage`, adds `dark` class before paint
2. **Toggle component** renders sun/moon/monitor icons with dropdown for Light/Dark/System
3. **On selection**: updates `localStorage`, toggles HTML class, optionally PUTs to server
4. **System mode**: listens for `prefers-color-scheme` media query changes in real time

Testing
-------

[](#testing)

```
./vendor/bin/pest --ci
```

License
-------

[](#license)

This package is open-sourced software licensed under the [MIT license](LICENSE).

###  Health Score

39

—

LowBetter than 85% of packages

Maintenance83

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 84.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

4

Last Release

87d ago

PHP version history (2 changes)v1.0.0PHP ^8.2

v1.1.0PHP ^8.2|^8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/05cef7d9ee65723b129042943511207fb34db74a56afbf67b5900987f758c161?d=identicon)[jeremykenedy](/maintainers/jeremykenedy)

---

Top Contributors

[![jeremykenedy](https://avatars.githubusercontent.com/u/6244570?v=4)](https://github.com/jeremykenedy "jeremykenedy (11 commits)")[![StyleCIBot](https://avatars.githubusercontent.com/u/11048387?v=4)](https://github.com/StyleCIBot "StyleCIBot (2 commits)")

---

Tags

laravellivewiretailwindthemebootstrapreacttogglevuedark-modesvelte

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/jeremykenedy-laravel-darkmode-toggle/health.svg)

```
[![Health](https://phpackages.com/badges/jeremykenedy-laravel-darkmode-toggle/health.svg)](https://phpackages.com/packages/jeremykenedy-laravel-darkmode-toggle)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3345.1M337](/packages/psalm-plugin-laravel)[livewire/flux

The official UI component library for Livewire.

9476.8M122](/packages/livewire-flux)[moonshine/moonshine

Laravel administration panel

1.3k239.9k76](/packages/moonshine-moonshine)[ijpatricio/mingle

Use Vue and React in Laravel Livewire Applications.

43961.0k2](/packages/ijpatricio-mingle)[grafite/forms

A remarkably magical form package for Laravel.

376.8k1](/packages/grafite-forms)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.2k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)