From 4e421e6e9ede12d13b3bf1318ee1f29ee841d062 Mon Sep 17 00:00:00 2001
From: Arun <arun4033622@gmail.com>
Date: Wed, 24 Feb 2021 19:52:17 +0530
Subject: [PATCH] feat: Support exporting with dark mode (#3046)

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
---
 src/actions/actionExport.tsx                  |  29 +++++
 src/actions/types.ts                          |   3 +-
 src/appState.ts                               |   2 +
 src/components/DarkModeToggle.tsx             |  17 +--
 src/components/ExportDialog.tsx               |   5 +
 src/constants.ts                              |   3 +
 src/css/theme.scss                            |   3 +-
 src/css/variables.module.scss                 |   2 +
 src/data/index.ts                             |   1 +
 src/locales/en.json                           |   3 +-
 src/packages/utils/package.json               |   2 +
 src/packages/utils/webpack.prod.config.js     |   7 +-
 src/packages/utils/yarn.lock                  | 115 +++++++++++++++++-
 src/renderer/renderScene.ts                   |   5 +
 src/scene/export.ts                           |  12 +-
 src/scene/types.ts                            |   1 +
 .../regressionTests.test.tsx.snap             |  67 ++++++++++
 src/types.ts                                  |   1 +
 18 files changed, 264 insertions(+), 14 deletions(-)

diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx
index b24c5e3d..cf303f79 100644
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -5,6 +5,7 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
+import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -204,3 +205,31 @@ export const actionLoadScene = register({
     />
   ),
 });
+
+export const actionExportWithDarkMode = register({
+  name: "exportWithDarkMode",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportWithDarkMode: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        marginTop: "-45px",
+        marginBottom: "10px",
+      }}
+    >
+      <DarkModeToggle
+        value={appState.exportWithDarkMode ? "dark" : "light"}
+        onChange={(appearance: Appearence) => {
+          updateData(appearance === "dark");
+        }}
+        title={t("labels.toggleExportColorScheme")}
+      />
+    </div>
+  ),
+});
diff --git a/src/actions/types.ts b/src/actions/types.ts
index 9d90efd8..ae1baefe 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -85,7 +85,8 @@ export type ActionName =
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
   | "distributeVertically"
-  | "viewMode";
+  | "viewMode"
+  | "exportWithDarkMode";
 
 export interface Action {
   name: ActionName;
diff --git a/src/appState.ts b/src/appState.ts
index f77e6cff..dc418fbc 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -40,6 +40,7 @@ export const getDefaultAppState = (): Omit<
     errorMessage: null,
     exportBackground: true,
     exportEmbedScene: false,
+    exportWithDarkMode: false,
     fileHandle: null,
     gridSize: null,
     height: window.innerHeight,
@@ -118,6 +119,7 @@ const APP_STATE_STORAGE_CONF = (<
   errorMessage: { browser: false, export: false },
   exportBackground: { browser: true, export: false },
   exportEmbedScene: { browser: true, export: false },
+  exportWithDarkMode: { browser: true, export: false },
   fileHandle: { browser: false, export: false },
   gridSize: { browser: true, export: true },
   height: { browser: false, export: false },
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 2cf7df07..06d02a64 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -10,13 +10,18 @@ export type Appearence = "light" | "dark";
 export const DarkModeToggle = (props: {
   value: Appearence;
   onChange: (value: Appearence) => void;
+  title?: string;
 }) => {
+  const title = props.title
+    ? props.title
+    : props.value === "dark"
+    ? t("buttons.lightMode")
+    : t("buttons.darkMode");
+
   return (
     <label
       className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
-      title={
-        props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
-      }
+      title={title}
     >
       <input
         className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@@ -25,11 +30,7 @@ export const DarkModeToggle = (props: {
           props.onChange(event.target.checked ? "dark" : "light")
         }
         checked={props.value === "dark"}
-        aria-label={
-          props.value === "dark"
-            ? t("buttons.lightMode")
-            : t("buttons.darkMode")
-        }
+        aria-label={title}
       />
       <div className="ToolIcon__icon">
         {props.value === "light" ? ICONS.MOON : ICONS.SUN}
diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx
index 2df04aa7..cc4219a5 100644
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@@ -19,6 +19,9 @@ import { ToolButton } from "./ToolButton";
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
 
+const supportsContextFilters =
+  "filter" in document.createElement("canvas").getContext("2d")!;
+
 export const ErrorCanvasPreview = () => {
   return (
     <div>
@@ -128,6 +131,8 @@ const ExportModal = ({
   return (
     <div className="ExportDialog">
       <div className="ExportDialog__preview" ref={previewRef} />
+      {supportsContextFilters &&
+        actionManager.renderAction("exportWithDarkMode")}
       <Stack.Col gap={2} align="center">
         <div className="ExportDialog__actions">
           <Stack.Row gap={2}>
diff --git a/src/constants.ts b/src/constants.ts
index 75bb6391..2a7c66fb 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,5 @@
 import { FontFamily } from "./element/types";
+import cssVariables from "./css/variables.module.scss";
 
 export const APP_NAME = "Excalidraw";
 
@@ -107,3 +108,5 @@ export const MODES = {
   ZEN: "zenMode",
   GRID: "gridMode",
 };
+
+export const APPEARANCE_FILTER = cssVariables.appearanceFilter;
diff --git a/src/css/theme.scss b/src/css/theme.scss
index b8f1bdad..56135cbf 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -1,4 +1,5 @@
 @import "open-color/open-color.scss";
+@import "./variables.module.scss";
 
 :root {
   --appearance-filter: none;
@@ -45,7 +46,7 @@
   }
 
   &.Appearance_dark {
-    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --appearance-filter: #{$appearance-filter};
     --button-destructive-bg-color: #5a0000;
     --button-destructive-color: #{$oc-red-3};
     --button-gray-1: #363636;
diff --git a/src/css/variables.module.scss b/src/css/variables.module.scss
index 5b9ee7a8..a35aa651 100644
--- a/src/css/variables.module.scss
+++ b/src/css/variables.module.scss
@@ -2,7 +2,9 @@
 
 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
+$appearance-filter: "invert(93%) hue-rotate(180deg)";
 
 :export {
   isMobileQuery: unquote($is-mobile-query);
+  appearanceFilter: unquote($appearance-filter);
 }
diff --git a/src/data/index.ts b/src/data/index.ts
index 7dae58be..3f4012de 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -41,6 +41,7 @@ export const exportCanvas = async (
   if (type === "svg" || type === "clipboard-svg") {
     const tempSvg = exportToSvg(elements, {
       exportBackground,
+      exportWithDarkMode: appState.exportWithDarkMode,
       viewBackgroundColor,
       exportPadding,
       scale,
diff --git a/src/locales/en.json b/src/locales/en.json
index 937f780a..32687080 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -92,7 +92,8 @@
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
     "distributeVertically": "Distribute vertically",
-    "viewMode": "View mode"
+    "viewMode": "View mode",
+    "toggleExportColorScheme": "Toggle export color scheme"
   },
   "buttons": {
     "clearReset": "Reset the canvas",
diff --git a/src/packages/utils/package.json b/src/packages/utils/package.json
index ad9d8bfe..d30e2b2c 100644
--- a/src/packages/utils/package.json
+++ b/src/packages/utils/package.json
@@ -44,7 +44,9 @@
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
+    "css-loader": "5.0.2",
     "file-loader": "6.2.0",
+    "sass-loader": "11.0.1",
     "ts-loader": "8.0.17",
     "webpack": "5.24.1",
     "webpack-bundle-analyzer": "4.4.0",
diff --git a/src/packages/utils/webpack.prod.config.js b/src/packages/utils/webpack.prod.config.js
index a3cc0b26..e9b0b944 100644
--- a/src/packages/utils/webpack.prod.config.js
+++ b/src/packages/utils/webpack.prod.config.js
@@ -13,13 +13,18 @@ module.exports = {
     libraryTarget: "umd",
   },
   resolve: {
-    extensions: [".tsx", ".ts", ".js"],
+    extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
   },
   optimization: {
     runtimeChunk: false,
   },
   module: {
     rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
+      },
       {
         test: /\.(ts|tsx|js)$/,
         use: [
diff --git a/src/packages/utils/yarn.lock b/src/packages/utils/yarn.lock
index dc6607d8..9d3b42d9 100644
--- a/src/packages/utils/yarn.lock
+++ b/src/packages/utils/yarn.lock
@@ -1291,6 +1291,11 @@ call-bind@^1.0.0:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
 caniuse-lite@^1.0.30001181:
   version "1.0.30001187"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz#5706942631f83baa5a0218b7dfa6ced29f845438"
@@ -1430,6 +1435,29 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-loader@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.0.2.tgz#24f758dae349bad0a440c50d7e2067742e0899cb"
+  integrity sha512-gbkBigdcHbmNvZ1Cg6aV6qh6k9N6XOr8YWzISLQGrwk2mgOH8LLrizhkxbDhQtaLtktyKHD4970S0xwz5btfTA==
+  dependencies:
+    camelcase "^6.2.0"
+    cssesc "^3.0.0"
+    icss-utils "^5.1.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.4"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.4"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1699,6 +1727,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 import-local@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
@@ -1707,6 +1740,11 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
 inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -1821,6 +1859,11 @@ kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klona@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
+  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@@ -1940,6 +1983,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@@ -2037,6 +2085,58 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
+  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
+postcss@^8.2.4:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe"
+  integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==
+  dependencies:
+    colorette "^1.2.1"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -2162,6 +2262,14 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+sass-loader@11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-11.0.1.tgz#8672f896593466573b904f47693e0695368e38c9"
+  integrity sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -2400,6 +2508,11 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -2407,7 +2520,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index f3f31bb5..e0228464 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -49,6 +49,7 @@ import {
 } from "../element/transformHandles";
 import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
 import { UserIdleState } from "../excalidraw-app/collab/types";
+import { APPEARANCE_FILTER } from "../constants";
 
 const hasEmojiSupport = supportsEmoji();
 
@@ -211,6 +212,10 @@ export const renderScene = (
   const normalizedCanvasWidth = canvas.width / scale;
   const normalizedCanvasHeight = canvas.height / scale;
 
+  if (sceneState.exportWithDarkMode) {
+    context.filter = APPEARANCE_FILTER;
+  }
+
   // Paint background
   if (typeof sceneState.viewBackgroundColor === "string") {
     const hasTransparence =
diff --git a/src/scene/export.ts b/src/scene/export.ts
index 2946b450..4b240ffa 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -7,7 +7,11 @@ import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
 import { distance, SVG_NS } from "../utils";
 import { AppState } from "../types";
 import { t } from "../i18n";
-import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_VERTICAL_ALIGN,
+  APPEARANCE_FILTER,
+} from "../constants";
 import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
@@ -61,6 +65,7 @@ export const exportToCanvas = (
     tempCanvas,
     {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      exportWithDarkMode: appState.exportWithDarkMode,
       scrollX: -minX + exportPadding,
       scrollY: -minY + exportPadding,
       zoom: getDefaultAppState().zoom,
@@ -87,6 +92,7 @@ export const exportToSvg = (
     exportBackground,
     exportPadding = 10,
     viewBackgroundColor,
+    exportWithDarkMode,
     scale = 1,
     shouldAddWatermark,
     metadata = "",
@@ -95,6 +101,7 @@ export const exportToSvg = (
     exportPadding?: number;
     scale?: number;
     viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
     shouldAddWatermark: boolean;
     metadata?: string;
   },
@@ -114,6 +121,9 @@ export const exportToSvg = (
   svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svgRoot.setAttribute("width", `${width * scale}`);
   svgRoot.setAttribute("height", `${height * scale}`);
+  if (exportWithDarkMode) {
+    svgRoot.setAttribute("filter", APPEARANCE_FILTER);
+  }
 
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
diff --git a/src/scene/types.ts b/src/scene/types.ts
index cbeb7bc9..fbf15cd5 100644
--- a/src/scene/types.ts
+++ b/src/scene/types.ts
@@ -6,6 +6,7 @@ export type SceneState = {
   scrollY: number;
   // null indicates transparent bg
   viewBackgroundColor: string | null;
+  exportWithDarkMode?: boolean;
   zoom: Zoom;
   shouldCacheIgnoreZoom: boolean;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index 574d47ce..34883c68 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -29,6 +29,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -489,6 +490,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -955,6 +957,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -1730,6 +1733,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -1933,6 +1937,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2390,6 +2395,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2642,6 +2648,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2805,6 +2812,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3281,6 +3289,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3588,6 +3597,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3791,6 +3801,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4034,6 +4045,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4285,6 +4297,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4667,6 +4680,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4961,6 +4975,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5267,6 +5282,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5474,6 +5490,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5637,6 +5654,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -6089,6 +6107,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -6406,6 +6425,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -8439,6 +8459,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -8800,6 +8821,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9054,6 +9076,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9306,6 +9329,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9620,6 +9644,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9783,6 +9808,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9946,6 +9972,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10109,6 +10136,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10302,6 +10330,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10495,6 +10524,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10688,6 +10718,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10881,6 +10912,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11044,6 +11076,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11207,6 +11240,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11400,6 +11434,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11563,6 +11598,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11756,6 +11792,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12471,6 +12508,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12723,6 +12761,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12824,6 +12863,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12923,6 +12963,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13086,6 +13127,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13393,6 +13435,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13700,6 +13743,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13863,6 +13907,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14058,6 +14103,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14306,6 +14352,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14629,6 +14676,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -15467,6 +15515,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -15774,6 +15823,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16081,6 +16131,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16459,6 +16510,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16625,6 +16677,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16945,6 +16998,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17183,6 +17237,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17437,6 +17492,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17763,6 +17819,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17862,6 +17919,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18025,6 +18083,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18845,6 +18904,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18944,6 +19004,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -19697,6 +19758,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20101,6 +20163,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20373,6 +20436,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20474,6 +20538,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20971,6 +21036,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -21070,6 +21136,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
diff --git a/src/types.ts b/src/types.ts
index ba0a3497..4e192daa 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,6 +57,7 @@ export type AppState = {
   elementLocked: boolean;
   exportBackground: boolean;
   exportEmbedScene: boolean;
+  exportWithDarkMode: boolean;
   shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;