@vueless/storybook-dark-mode 9.0.2 → 9.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ export default {
|
|
|
27
27
|
Configure the dark and light mode by adding the following to your `.storybook/preview.js` file:
|
|
28
28
|
|
|
29
29
|
```js
|
|
30
|
-
import { themes } from '
|
|
30
|
+
import { themes } from 'storybook/theming';
|
|
31
31
|
|
|
32
32
|
export const parameters = {
|
|
33
33
|
darkMode: {
|
|
@@ -121,7 +121,6 @@ If your components use a custom Theme provider, you can integrate it by using th
|
|
|
121
121
|
|
|
122
122
|
```js
|
|
123
123
|
import { useDarkMode } from '@vueless/storybook-dark-mode';
|
|
124
|
-
import { addDecorator } from '@storybook/react';
|
|
125
124
|
|
|
126
125
|
// your theme provider
|
|
127
126
|
import ThemeContext from './theme';
|
|
@@ -136,7 +135,7 @@ function ThemeWrapper(props) {
|
|
|
136
135
|
);
|
|
137
136
|
}
|
|
138
137
|
|
|
139
|
-
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>
|
|
138
|
+
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>];
|
|
140
139
|
```
|
|
141
140
|
|
|
142
141
|
#### Theme Knobs
|
|
@@ -144,7 +143,7 @@ export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWr
|
|
|
144
143
|
If you want to have you UI's dark mode separate from you components' dark mode, implement this global decorator:
|
|
145
144
|
|
|
146
145
|
```js
|
|
147
|
-
import { themes } from '
|
|
146
|
+
import { themes } from 'storybook/theming';
|
|
148
147
|
|
|
149
148
|
// Add a global decorator that will render a dark background when the
|
|
150
149
|
// "Color Scheme" knob is set to dark
|
|
@@ -178,8 +177,8 @@ export const decorators = [knobDecorator];
|
|
|
178
177
|
You can also listen for the `DARK_MODE` event via the addons channel.
|
|
179
178
|
|
|
180
179
|
```js
|
|
181
|
-
import {
|
|
182
|
-
import {
|
|
180
|
+
import { useEffect } from 'react';
|
|
181
|
+
import { addons } from 'storybook/preview-api';
|
|
183
182
|
import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
|
|
184
183
|
|
|
185
184
|
// your theme provider
|
|
@@ -207,7 +206,7 @@ function ThemeWrapper(props) {
|
|
|
207
206
|
);
|
|
208
207
|
}
|
|
209
208
|
|
|
210
|
-
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>
|
|
209
|
+
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>];
|
|
211
210
|
```
|
|
212
211
|
|
|
213
212
|
Since in docs mode, Storybook will not display its toolbar,
|
|
@@ -216,9 +215,9 @@ By editing your `.storybook/preview.js`.
|
|
|
216
215
|
|
|
217
216
|
```js
|
|
218
217
|
import React from 'react';
|
|
219
|
-
import { addons } from '
|
|
218
|
+
import { addons } from 'storybook/preview-api';
|
|
220
219
|
import { DocsContainer } from '@storybook/addon-docs';
|
|
221
|
-
import { themes } from '
|
|
220
|
+
import { themes } from 'storybook/theming';
|
|
222
221
|
|
|
223
222
|
import {
|
|
224
223
|
DARK_MODE_EVENT_NAME,
|