大まかな流れから。
Laravel JetStream
php artisan jetstream:install livewire --dark
この --dark オプションをつけると、諸々がダークモードでインストールされます。
該当オプションは vendor/laravel/jetstream/src/Console/InstallCommand.php の中に書いてあるのでわかりやすいんですけど、
vendor/laravel/jetstream/src/Console/InstallCommand.php
protected function removeDarkClasses(Finder $finder)
{
foreach ($finder as $file) {
file_put_contents($file->getPathname(), preg_replace('/\sdark:[^\s"\']+/', '', $file->getContents()));
}
}
と書いてある通り、設定ファイルの dark: のところを消してます。
で、どのファイルを対象にしているかというと tailwind.config.js です。
tailwind.config.js
export default {
dark: 'class',
};
消してるのはこの辺。
WireUI
しかし、Livewire用の拡張UIの WireUI をインストールすると、ダークモードが解除されてしまいます。
composer require wireui/wireui
これの原因は tailwind.config.js に追記する下記の設定のせいです。
tailwind.config.js
module.exports = {
...
presets: [
...
require("./vendor/wireui/wireui/tailwind.config.js")
],
content: [
...
"./vendor/wireui/wireui/src/*.php",
"./vendor/wireui/wireui/ts/**/*.ts",
"./vendor/wireui/wireui/src/WireUi/**/*.php",
"./vendor/wireui/wireui/src/Components/**/*.php",
],
...
}
presets で vendor/wireui/wireui/tailwind.config.js を参照するようになってますね。
こいつの中をみると、
vendor/wireui/wireui/tailwind.config.js
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
(略)
darkMode: 'class',
(略)
とまあ、ばっちり darkMode のパラメーターが復活してます。
こいつがあるとデフォルトでダークモードが有効になりません。
なので一手間、body タグにでもクラスをつけてあげるようにしましょう。
私の場合は layout に埋めてます。
resources/views/layouts/app.blade.php
<body class="font-sans antialiased dark">
dark の文字列を付けたり消したりすれば良いので、設定ファイルや env で制御したり、JavaScript でクラスを付けたり消したりすれば良いでしょう。
細かくは Tailwind のマニュアルを参考にどうぞ。
Tailwind DarkMode