From 198800136eddc0c2697302332d0cb7d9ebe7c9ee Mon Sep 17 00:00:00 2001
From: Arun <arun4033622@gmail.com>
Date: Sat, 8 May 2021 15:17:30 +0530
Subject: [PATCH] feat: Add shortcut for dark mode (#3543)

* Create and move toggle into an action

* Add shortcut on help dialog
---
 src/actions/actionCanvas.tsx                  | 25 +++++++++++++++++++
 src/actions/index.ts                          |  1 +
 src/actions/types.ts                          |  3 ++-
 .../BackgroundPickerAndDarkModeToggle.tsx     | 12 +--------
 src/components/HelpDialog.tsx                 |  4 +++
 src/keys.ts                                   |  1 +
 src/locales/en.json                           |  3 ++-
 7 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 5257cb31e..7390b3d38 100644
--- a/src/actions/actionCanvas.tsx
+++ b/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,
+});
diff --git a/src/actions/index.ts b/src/actions/index.ts
index fed4139e0..f2bf22543 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -26,6 +26,7 @@ export {
   actionZoomOut,
   actionResetZoom,
   actionZoomToFit,
+  actionToggleTheme,
 } from "./actionCanvas";
 
 export { actionFinalize } from "./actionFinalize";
diff --git a/src/actions/types.ts b/src/actions/types.ts
index a0ddf3998..4e1c550e7 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -98,7 +98,8 @@ export type ActionName =
   | "flipHorizontal"
   | "flipVertical"
   | "viewMode"
-  | "exportWithDarkMode";
+  | "exportWithDarkMode"
+  | "toggleTheme";
 
 export interface Action {
   name: ActionName;
diff --git a/src/components/BackgroundPickerAndDarkModeToggle.tsx b/src/components/BackgroundPickerAndDarkModeToggle.tsx
index a5e0e6684..e6a048805 100644
--- a/src/components/BackgroundPickerAndDarkModeToggle.tsx
+++ b/src/components/BackgroundPickerAndDarkModeToggle.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
-import { DarkModeToggle } from "./DarkModeToggle";
 
 export const BackgroundPickerAndDarkModeToggle = ({
   appState,
@@ -16,15 +15,6 @@ export const BackgroundPickerAndDarkModeToggle = ({
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}
-    {showThemeBtn && (
-      <div style={{ marginInlineStart: "0.25rem" }}>
-        <DarkModeToggle
-          value={appState.theme}
-          onChange={(theme) => {
-            setAppState({ theme });
-          }}
-        />
-      </div>
-    )}
+    {showThemeBtn && <>{actionManager.renderAction("toggleTheme")}</>}
   </div>
 );
diff --git a/src/components/HelpDialog.tsx b/src/components/HelpDialog.tsx
index 5fad45e29..b11ac7116 100644
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -231,6 +231,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.viewMode")}
                   shortcuts={[getShortcutKey("Alt+R")]}
                 />
+                <Shortcut
+                  label={t("labels.toggleTheme")}
+                  shortcuts={[getShortcutKey("Alt+Shift+D")]}
+                />
               </ShortcutIsland>
             </Column>
             <Column>
diff --git a/src/keys.ts b/src/keys.ts
index 31baff550..5ac2d8946 100644
--- a/src/keys.ts
+++ b/src/keys.ts
@@ -15,6 +15,7 @@ export const CODES = {
   QUOTE: "Quote",
   ZERO: "Digit0",
   C: "KeyC",
+  D: "KeyD",
   G: "KeyG",
   F: "KeyF",
   H: "KeyH",
diff --git a/src/locales/en.json b/src/locales/en.json
index d5d292be6..96efc0fdd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -96,7 +96,8 @@
     "flipVertical": "Flip vertical",
     "viewMode": "View mode",
     "toggleExportColorScheme": "Toggle export color scheme",
-    "share": "Share"
+    "share": "Share",
+    "toggleTheme": "Toggle theme"
   },
   "buttons": {
     "clearReset": "Reset the canvas",