diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 4f29178..b4dd282 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -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}>