Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Provide better dark mode support #93

Merged
merged 2 commits into from
Mar 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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