feat: Add shortcut for dark mode (#3543)

* Create and move toggle into an action

* Add shortcut on help dialog

src/actions/actionCanvas.tsx

@@ -3,6 +3,7 @@ import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
 import { resetZoom, trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
+import { DarkModeToggle } from "../components/DarkModeToggle";
 import { ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
@@ -260,3 +261,27 @@ export const actionZoomToFit = register({
     !event.altKey &&
     !event[KEYS.CTRL_OR_CMD],
 });
+
+export const actionToggleTheme = register({
+  name: "toggleTheme",
+  perform: (_, appState, value) => {
+    return {
+      appState: {
+        ...appState,
+        theme: value || (appState.theme === "light" ? "dark" : "light"),
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <div style={{ marginInlineStart: "0.25rem" }}>
+      <DarkModeToggle
+        value={appState.theme}
+        onChange={(theme) => {
+          updateData(theme);
+        }}
+      />
+    </div>
+  ),
+  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
+});

src/actions/index.ts

@@ -26,6 +26,7 @@ export {
   actionZoomOut,
   actionResetZoom,
   actionZoomToFit,
+  actionToggleTheme,
 } from "./actionCanvas";
 
 export { actionFinalize } from "./actionFinalize";

src/actions/types.ts

@@ -98,7 +98,8 @@ export type ActionName =
   | "flipHorizontal"
   | "flipVertical"
   | "viewMode"
-  | "exportWithDarkMode";
+  | "exportWithDarkMode"
+  | "toggleTheme";
 
 export interface Action {
   name: ActionName;