包简介

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).

README 文档

README

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.

Framework Support

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

	Blade + Alpine.js	Livewire 3	Vue 3	React 18	Svelte 4
Tailwind v4	✅	✅	✅	✅	✅
Bootstrap 5	✅	✅	✅	✅	✅
Bootstrap 4	✅	✅	✅	✅	✅

15 combinations. Zero feature gaps.

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

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

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

1. Add the init script to `<head>`

Prevents flash of wrong theme on page load:

<head>
    @include('darkmode::init-script')
</head>

2. Add the toggle component

Blade (with Alpine.js):

<x-darkmode-toggle />

Livewire:

<livewire:darkmode-toggle />

Vue:

<script setup>
import DarkmodeToggle from './vendor/darkmode-toggle/DarkmodeToggle.vue'
</script>

<template>
    <DarkmodeToggle persist-url="/darkmode/preference" />
</template>

React:

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

export default function Nav() {
    return <DarkmodeToggle persistUrl="/darkmode/preference" />
}

Svelte:

<script>
import DarkmodeToggle from './vendor/darkmode-toggle/DarkmodeToggle.svelte'
</script>

<DarkmodeToggle persistUrl="/darkmode/preference" />

Features

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

Configuration

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

Key options in config/darkmode.php:

Option	Default	Description
`strategy`	`class`	Dark mode strategy
`class_name`	`dark`	Class added to `<html>`
`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

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

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

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)

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

Command	Description
`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

Flag	Description
`--css=`	CSS framework: `tailwind`, `bootstrap5`, `bootstrap4`
`--frontend=`	Frontend: `blade`, `livewire`, `vue`, `react`, `svelte`
`--force`	Skip reinstall confirmation when already installed

How It Works

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

Testing

./vendor/bin/pest --ci

License

This package is open-sourced software licensed under the MIT license.

jeremykenedy/laravel-darkmode-toggle 适用场景与选型建议

jeremykenedy/laravel-darkmode-toggle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 2 次下载、GitHub Stars 达 1，最近一次更新时间为 2026 年 03 月 28 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「theme」「bootstrap」「laravel」「react」「toggle」「vue」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 jeremykenedy/laravel-darkmode-toggle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 jeremykenedy/laravel-darkmode-toggle 我们能提供哪些服务？

定制开发 / 二次开发

基于 jeremykenedy/laravel-darkmode-toggle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 jeremykenedy/laravel-darkmode-toggle 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

bimthebam/silverstripe-theme-bs4base 0

A Bootstrap 4.x base theme for SilverStripe

pmvc-theme/lucency_html 0

Lucency Theme

dynamic/bootstrap-select 3

bootstrap select field module implementing http://silviomoreto.github.io/bootstrap-select/

const-se/selectize-bootstrap4-theme 41

Selectize Theme for Bootstrap 4

foxtes/alfabank-rest 1

Alfabank REST API integration

jeremykenedy/laravel-darkmode-toggle

包简介

关键字：

README 文档

README

Table of Contents

Framework Support

Requirements

Installation

Non-Interactive Install

Quick Start

1. Add the init script to `<head>`

2. Add the toggle component

Features

Configuration

Server-Side Persistence

Changing Frameworks

Update (Interactive)

Switch (Quick)

Artisan Commands

Install Options

How It Works

Testing

License

jeremykenedy/laravel-darkmode-toggle 适用场景与选型建议

与 jeremykenedy/laravel-darkmode-toggle 相关的其它包

统计信息

GitHub 信息

其他信息

jeremykenedy/laravel-darkmode-toggle

包简介

关键字：

README 文档

README

Table of Contents

Framework Support

Requirements

Installation

Non-Interactive Install

Quick Start

1. Add the init script to <head>

2. Add the toggle component

Features

Configuration

Server-Side Persistence

Changing Frameworks

Update (Interactive)

Switch (Quick)

Artisan Commands

Install Options

How It Works

Testing

License

jeremykenedy/laravel-darkmode-toggle 适用场景与选型建议

与 jeremykenedy/laravel-darkmode-toggle 相关的其它包

统计信息

GitHub 信息

其他信息

1. Add the init script to `<head>`