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. jeremykenedy/laravel-darkmode-toggle ActivePackage 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.0.0(1mo ago)10MITBladePHP ^8.2 Since Mar 28Pushed 1mo agoCompare [ 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 1mo ago READMEChangelog (2)Dependencies (1)Versions (2)Used By (0) Laravel Dark Mode Toggle ======================== [](#laravel-dark-mode-toggle) A standalone, framework-agnostic dark mode toggle component for Laravel. Supports Tailwind CSS, Bootstrap 5, and Bootstrap 4, with Blade, Livewire, Vue, React, and Svelte frontend options. [![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)[![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) - [Features](#features) - [Installation](#installation) - [Quick Start](#quick-start) - [Usage](#usage) - [Configuration](#configuration) - [Server-Side Persistence](#server-side-persistence) - [CSS Framework Switching](#css-framework-switching) - [How It Works](#how-it-works) - [Requirements](#requirements) - [License](#license) Features -------- [](#features) - Three modes: Light, Dark, System (follows OS preference) - Persists to `localStorage` (instant, no flash) - Optional server-side persistence (saves to user profile) - Class-based dark mode (``) - FOUC prevention via init script - Multi-framework CSS: Tailwind, Bootstrap 5, Bootstrap 4 - Multi-framework frontend: Blade/Alpine.js, Livewire 3, Vue 3, React 18, Svelte 4 - Configurable via `config/darkmode.php` - Artisan install command with framework selection Installation ------------ [](#installation) ``` composer require jeremykenedy/laravel-darkmode-toggle ``` Quick Start ----------- [](#quick-start) ``` php artisan darkmode:install --css=tailwind --frontend=blade ``` ### Options [](#options) FlagValuesDefault`--css``tailwind`, `bootstrap5`, `bootstrap4``tailwind``--frontend``blade`, `livewire`, `vue`, `react`, `svelte``blade``--no-config`Skip publishing config-Usage ----- [](#usage) ### 1. Add the init script to `` [](#1-add-the-init-script-to-head) This prevents a flash of the 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' ``` ### 3. Publish frontend components (Vue/React/Svelte only) [](#3-publish-frontend-components-vuereactsvelte-only) ``` php artisan darkmode:install --frontend=vue php artisan darkmode:install --frontend=react php artisan darkmode:install --frontend=svelte ``` Configuration ------------- [](#configuration) ``` php artisan vendor:publish --tag=darkmode-config ``` Key options in `config/darkmode.php`: ``` return [ 'strategy' => 'class', // Dark mode strategy 'class_name' => 'dark', // Class added to 'default' => 'system', // Default mode 'storage_key' => 'theme', // localStorage key 'persist_to_server' => true, // Save to DB when authenticated 'persist_route' => '/profile/dark-mode', 'persist_method' => 'PUT', 'persist_field' => 'dark_mode', 'css_framework' => null, // null = inherit from ui-kit config 'routes' => [ 'enabled' => true, 'prefix' => 'darkmode', 'middleware' => ['web', 'auth'], ], ]; ``` Server-Side Persistence ----------------------- [](#server-side-persistence) The package includes a route `PUT /darkmode/preference` that saves the preference. To use your own route (e.g., from `laravel-profiles`), set in config: ``` 'persist_route' => '/profile/dark-mode', 'routes' => ['enabled' => false], // disable package route ``` The toggle sends a JSON request: ``` { "dark_mode": "dark" } ``` CSS Framework Switching ----------------------- [](#css-framework-switching) Switch CSS framework at any time: ``` # In .env UI_KIT_CSS=bootstrap5 ``` Or set directly in `config/darkmode.php`: ``` 'css_framework' => 'bootstrap5', ``` The component automatically renders with the correct framework's classes. How 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, dropdown with Light/Dark/System options 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 Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 12 or 13 - Alpine.js 3 (for Blade views) License ------- [](#license) MIT ### Health Score 38 — LowBetter than 85% of packages Maintenance90 Actively maintained with recent releases Popularity2 Limited adoption so far Community8 Small or concentrated contributor base Maturity46 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 Unknown Total 1 Last Release 45d ago ### 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 ### 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 [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[ijpatricio/mingle Use Vue and React in Laravel Livewire Applications. 43445.4k2](/packages/ijpatricio-mingle)[carbon/pipeline Ultra-fast build stack for Neos CMS based on esbuild and PostCSS 1725.5k1](/packages/carbon-pipeline) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)