Switch the dark-mode of your TALL Stack application with ease.
The concept of dark-mode in TailwindCSS with class strategy is simply about adding dark class to the html element in the page, which activates the Tailwind classes that are prefixed with the dark: psuedo-element...
Therefore, we can utilize an Alpine.js custom bind to either add a dark-mode switcher in a configurable corner of the page, or apply a different bind to a clickable element which will hook the necessary logic to it on its own.
This is a TALL Stack supportive package, so... -you know the drill! 🙂
-
Install the package via Composer:
composer require goodm4ven/good-night
-
Publish the package configuration and view files:
php artisan vendor:publish --provider="GoodM4ven\GoodNight\GoodNightServiceProvider"- If you're updating the package, please add
--forceoption to override the old assets.
- If you're updating the package, please add
-
Open the published
config/good-night.phpfile, and determine the default mode as well as whether the corner switcher is on or not.-
Here are the default configurations of the file.
/* |-------------------------------------------------------------------------- | Default Mode |-------------------------------------------------------------------------- | | Determine the default dark/light mode that the app will start with. | | The default is `light` and is stored in `$store.goodNightMode`. | */ 'default-mode' => env('GOOD_NIGHT_DEFAULT', 'light'), /* |-------------------------------------------------------------------------- | Switcher Enabled |-------------------------------------------------------------------------- | | Decide whether to show or hide the corner dark-mode switcher in the page. | | Either way, the package won't work without `@goodNight` directive. | */ 'switcher-enabled' => env('GOOD_NIGHT_ENABLED', true), /* |-------------------------------------------------------------------------- | Switcher Position |-------------------------------------------------------------------------- | | Determine the position of the corner switcher button when shown in the page. | | Available positions are: top-right, top-left, bottom-left, bottom-right. | */ 'switcher-position' => env('GOOD_NIGHT_POSITION', 'top-right'),
-
-
Add the following Blade directive to your
masterlayout or view:<body> @goodNight ... </body>
-
Modify the
darkModeand thecontentof yourtailwind.config.jsfile:module.exports = { content: [ ... './resources/views/**/*.blade.php', // or to './resources/views/vendor/good-night/**' specifically... ], darkMode: 'class', ... }
-
Compile your views with dark Tailwind classes into
app.css, and Alpine in yourapp.js.
There are 2 different ways to use this package:
-
Enable the corner switcher in configuration and it will be displayed by default.
- You can customize the published view at
resources/views/vendor/good-night/partials/good-night-switcher.blade.php.
- You can customize the published view at
-
Disable the corner switcher in configuration and then add the following to a clickable element:
<button x-data="goodNight()" x-bind="custom" > Theme Changer </button>
And yes, in both cases, the package will not work without having @goodNight Blade directive in the page!
-
How does this switching happen smoothly?
- By adding one of the
transitionTailwind property classes on the thingies withdark:pseudo-elements.
- By adding one of the
-
What if I want to add extra logic upon theme switching?
-
You can pass a callback to
goodNight(), like so:<button x-data="goodNight(() => { console.log('it\'s still 8, Mom!') })" x-bind="custom" > 😠 </button>
-
Pull-requests are free around here. A special package privilage, you know. 😋
- There's an available and automated CHANGELOG of all the updates.
-
Abstract the binding in a custom Alpine.js directive, somehow; maybe. 🤔
<button x-data {{-- Or on a parent somewhere, so it's optional --}} x-good-night="optionalCallback()" {{-- It does writes "good-night" only once! --}} > Switcher </button>
Please do 🌟 all the packages you rely on, but NOT this one. 😍
والحمد لله رب العالمين