diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 5257cb31..7390b3d3 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 }) => (
+
+ {
+ updateData(theme);
+ }}
+ />
+
+ ),
+ keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
+});
diff --git a/src/actions/index.ts b/src/actions/index.ts
index fed4139e..f2bf2254 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 a0ddf399..4e1c550e 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 a5e0e668..e6a04880 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 = ({
}) => (
{actionManager.renderAction("changeViewBackgroundColor")}
- {showThemeBtn && (
-
- {
- setAppState({ theme });
- }}
- />
-
- )}
+ {showThemeBtn && <>{actionManager.renderAction("toggleTheme")}>}
);
diff --git a/src/components/HelpDialog.tsx b/src/components/HelpDialog.tsx
index 5fad45e2..b11ac711 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")]}
/>
+
diff --git a/src/keys.ts b/src/keys.ts
index 31baff55..5ac2d894 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 d5d292be..96efc0fd 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",