mirror of
https://github.com/mantinedev/next-app-template.git
synced 2026-06-22 04:11:26 +10:00
Add mod + J keyboard shortcut to toggle color scheme in storybook
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useGlobals } from 'storybook/preview-api';
|
||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../theme';
|
||||
|
||||
@@ -30,6 +32,25 @@ export const globalTypes = {
|
||||
|
||||
export const decorators = [
|
||||
(renderStory: any, context: any) => {
|
||||
const [{ theme: storybookTheme }, updateGlobals] = useGlobals();
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
const isMod = event.metaKey || event.ctrlKey;
|
||||
const isJ = event.code === 'KeyJ';
|
||||
|
||||
if (!isMod || !isJ) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
updateGlobals({ theme: storybookTheme === 'dark' ? 'light' : 'dark' });
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [storybookTheme, updateGlobals]);
|
||||
|
||||
const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
|
||||
return (
|
||||
<MantineProvider theme={theme} forceColorScheme={scheme}>
|
||||
|
||||
Reference in New Issue
Block a user