Add mod + J keyboard shortcut to toggle color scheme in storybook

This commit is contained in:
Vitaly Rtishchev
2026-03-01 14:53:51 +03:00
parent 539d37162c
commit 1b34017a7b
+21
View File
@@ -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}>