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

Commit 6b02836

Browse files
authored
Provide better dark mode support (#93)
1 parent f09e3b9 commit 6b02836

File tree

9 files changed

+403
-606
lines changed

9 files changed

+403
-606
lines changed

docs/advanced-usage/customizing-css.md

+31-2
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ module.exports = {
9797

9898
// Only necessary if you're going to use the switch-toggle component with different colors
9999
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/switch-toggle"),
100+
101+
// Only necessary if you're going to support dark mode
102+
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode"),
100103
],
101104
};
102105
```
@@ -150,6 +153,14 @@ module.exports = {
150153
// For checkbox/radio sizing
151154
pattern: /form-choice--*/,
152155
},
156+
157+
// For dark mode...
158+
{
159+
// quill editor classes
160+
pattern: /ql--*/,
161+
},
162+
'filepond--panel-root',
163+
'filepond--root',
153164
],
154165
};
155166
```
@@ -177,7 +188,25 @@ For a full reference of the variables you can set in your CSS, please refer to t
177188

178189
## Dark Mode
179190

180-
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
181-
strategy, be sure to use the default `dark` class for dark mode.
191+
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.
192+
193+
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
194+
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
195+
pass to the plugin:
196+
197+
```js
198+
// tailwind.config.js
199+
200+
module.exports = {
201+
plugins: [
202+
// ...
203+
require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode")({
204+
quill: false,
205+
filepond: false,
206+
}),
207+
]
208+
};
209+
```
182210

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

docs/upgrade.md

+21
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,27 @@ title: Upgrade
33
sort: 4
44
---
55

6+
## Upgrading from v8 to v8.1.0
7+
8+
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.
9+
10+
### Dark Mode
11+
12+
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.
13+
If your app does not support dark mode, you don't need to worry about this change.
14+
15+
```js
16+
// tailwind.config.js
17+
module.exports = {
18+
plugins: [
19+
// ...
20+
require('./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode'),
21+
],
22+
};
23+
```
24+
25+
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.
26+
627
## Upgrading from v7 to v8
728

829
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

0 commit comments

Comments
 (0)