Skip to content

Commit

Permalink
Provide better dark mode support (#93)
Browse files Browse the repository at this point in the history
  • Loading branch information
rawilk authored Mar 27, 2023
1 parent f09e3b9 commit 6b02836
Show file tree
Hide file tree
Showing 9 changed files with 403 additions and 606 deletions.
33 changes: 31 additions & 2 deletions docs/advanced-usage/customizing-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ module.exports = {

// Only necessary if you're going to use the switch-toggle component with different colors
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/switch-toggle"),

// Only necessary if you're going to support dark mode
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode"),
],
};
```
Expand Down Expand Up @@ -150,6 +153,14 @@ module.exports = {
// For checkbox/radio sizing
pattern: /form-choice--*/,
},

// For dark mode...
{
// quill editor classes
pattern: /ql--*/,
},
'filepond--panel-root',
'filepond--root',
],
};
```
Expand Down Expand Up @@ -177,7 +188,25 @@ For a full reference of the variables you can set in your CSS, please refer to t

## Dark Mode

The package's components have also been styled for dark mode and will work with both the class based and OS based strategies. If you are using the class based dark mode
strategy, be sure to use the default `dark` class for dark mode.
The package's components have also been styled for dark mode and will work with both the class based and OS based strategies. A custom dark mode selector is also supported too.

To opt in to dark mode, you will need to add the `dark-mode` plugin to your Tailwind configuration file. See [Plugins](#user-content-plugins) for more information. By default, all
components are styled for dark mode in this plugin. You may opt out of certain components being styled here if you're not using them. Here is an example of all the options you can
pass to the plugin:

```js
// tailwind.config.js

module.exports = {
plugins: [
// ...
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode")({
quill: false,
filepond: false,
}),
]
};
```

For more information, please refer to [Tailwind's Dark Mode Documentation](https://tailwindcss.com/docs/dark-mode).

21 changes: 21 additions & 0 deletions docs/upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@ title: Upgrade
sort: 4
---

## Upgrading from v8 to v8.1.0

Although technically there is a breaking change in this version of v8, I've decided against bumping a major version number since the change does not affect functionality of the package.

### Dark Mode

To allow for more flexibility for dark mode configuration in Tailwind, a new `dark-mode` Tailwind plugin has been added, which you will need to add to your project's Tailwind config file.
If your app does not support dark mode, you don't need to worry about this change.

```js
// tailwind.config.js
module.exports = {
plugins: [
// ...
require('./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode'),
],
};
```

The `dark-mode.css` file has also been removed, so if you were manually pulling that into your stylesheets, you will need to remove the reference to it.

## Upgrading from v7 to v8

Several breaking changes were introduced in v8. Please read the following carefully before upgrading. This list may not be fully comprehensive, so be sure to check the
Expand Down
Loading

0 comments on commit 6b02836

Please sign in to comment.