From a6438528375ab54d3ec7d80ac6b6ddd65ea8cf1e Mon Sep 17 00:00:00 2001
From: Jonathan Fishner <jonathanfishner11@gmail.com>
Date: Tue, 4 Mar 2025 10:28:30 +0200
Subject: [PATCH] fix(shorcuts): add shortcut to toggle the theme (#602)

---
 .../keyboard-shortcuts.ts                     |  8 ++++++
 src/context/theme-context/theme-provider.tsx  | 25 ++++++++++++++++++-
 .../editor-page/top-navbar/menu/menu.tsx      | 12 +++++++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts b/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts
index b3e5317b..6c2a337e 100644
--- a/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts
+++ b/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts
@@ -7,6 +7,7 @@ export enum KeyboardShortcutAction {
     SAVE_DIAGRAM = 'save_diagram',
     TOGGLE_SIDE_PANEL = 'toggle_side_panel',
     SHOW_ALL = 'show_all',
+    TOGGLE_THEME = 'toggle_theme',
 }
 
 export interface KeyboardShortcut {
@@ -63,6 +64,13 @@ export const keyboardShortcuts: Record<
         keyCombinationMac: 'meta+0',
         keyCombinationWin: 'ctrl+0',
     },
+    [KeyboardShortcutAction.TOGGLE_THEME]: {
+        action: KeyboardShortcutAction.TOGGLE_THEME,
+        keyCombinationLabelMac: '⌘M',
+        keyCombinationLabelWin: 'Ctrl+M',
+        keyCombinationMac: 'meta+m',
+        keyCombinationWin: 'ctrl+m',
+    },
 };
 
 export interface KeyboardShortcutForOS {
diff --git a/src/context/theme-context/theme-provider.tsx b/src/context/theme-context/theme-provider.tsx
index f92821f5..4658170a 100644
--- a/src/context/theme-context/theme-provider.tsx
+++ b/src/context/theme-context/theme-provider.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import type { EffectiveTheme } from './theme-context';
 import { ThemeContext } from './theme-context';
 import { useMediaQuery } from 'react-responsive';
 import { useLocalConfig } from '@/hooks/use-local-config';
+import { useHotkeys } from 'react-hotkeys-hook';
+import {
+    KeyboardShortcutAction,
+    keyboardShortcutsForOS,
+} from '../keyboard-shortcuts-context/keyboard-shortcuts';
 
 export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -29,6 +34,24 @@ export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
         }
     }, [effectiveTheme]);
 
+    const handleThemeToggle = useCallback(() => {
+        if (theme === 'system') {
+            setTheme(effectiveTheme === 'dark' ? 'light' : 'dark');
+        } else {
+            setTheme(theme === 'dark' ? 'light' : 'dark');
+        }
+    }, [theme, effectiveTheme, setTheme]);
+
+    useHotkeys(
+        keyboardShortcutsForOS[KeyboardShortcutAction.TOGGLE_THEME]
+            .keyCombination,
+        handleThemeToggle,
+        {
+            preventDefault: true,
+        },
+        [handleThemeToggle]
+    );
+
     return (
         <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
             {children}
diff --git a/src/pages/editor-page/top-navbar/menu/menu.tsx b/src/pages/editor-page/top-navbar/menu/menu.tsx
index 8e459c95..46b17d70 100644
--- a/src/pages/editor-page/top-navbar/menu/menu.tsx
+++ b/src/pages/editor-page/top-navbar/menu/menu.tsx
@@ -470,8 +470,16 @@ export const Menu: React.FC<MenuProps> = () => {
                     </MenubarSub>
                     <MenubarSeparator />
                     <MenubarSub>
-                        <MenubarSubTrigger>
-                            {t('menu.view.theme')}
+                        <MenubarSubTrigger className="flex items-center gap-1">
+                            <span>{t('menu.view.theme')}</span>
+                            <div className="flex-1" />
+                            <MenubarShortcut>
+                                {
+                                    keyboardShortcutsForOS[
+                                        KeyboardShortcutAction.TOGGLE_THEME
+                                    ].keyCombinationLabel
+                                }
+                            </MenubarShortcut>
                         </MenubarSubTrigger>
                         <MenubarSubContent>
                             <MenubarCheckboxItem