Good Night
Switch the dark-mode of your TALL Stack application with ease.
Description
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.
Installation
This is a TALL Stack supportive package, so... -you know the drill!
Requirements
Steps
-
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.
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'),">/*
|--------------------------------------------------------------------------
| 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.
Usage
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!
Cases
-
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>
-
Development
Pull-requests are free around here. A special package privilage, you know.
- There's an available and automated CHANGELOG of all the updates.
TODOs
-
Abstract the binding in a custom Alpine.js directive, somehow; maybe.
Switcher "><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>
Remarks
Please do all the packages you rely on, but NOT this one.
wlHmd llh rb l`lmyn