Adds theme option to StatusBar

[anthony0030]

Closes #5490

[github-actions]

Diff output files

diff --git a/packages/@uppy/status-bar/lib/StatusBar.js b/packages/@uppy/status-bar/lib/StatusBar.js
index 1f640db..e54e97d 100644
--- a/packages/@uppy/status-bar/lib/StatusBar.js
+++ b/packages/@uppy/status-bar/lib/StatusBar.js
@@ -12,7 +12,7 @@ import getTextDirection from "@uppy/utils/lib/getTextDirection";
 import statusBarStates from "./StatusBarStates.js";
 import StatusBarUI from "./StatusBarUI.js";
 const packageJson = {
-  "version": "4.0.3",
+  "version": "4.0.4",
 };
 import locale from "./locale.js";
 const speedFilterHalfLife = 2000;
@@ -53,6 +53,7 @@ const defaultOptions = {
   showProgressDetails: false,
   hideAfterFinish: true,
   doneButtonHandler: null,
+  theme: "light",
 };
 var _lastUpdateTime = _classPrivateFieldLooseKey("lastUpdateTime");
 var _previousUploadedBytes = _classPrivateFieldLooseKey("previousUploadedBytes");
@@ -88,6 +89,25 @@ export default class StatusBar extends UIPlugin {
     this.startUpload = () => {
       return this.uppy.upload().catch(() => {});
     };
+    this.setDarkModeCapability = isDarkModeOn => {
+      const {
+        capabilities,
+      } = this.uppy.getState();
+      this.uppy.setState({
+        capabilities: {
+          ...capabilities,
+          darkMode: isDarkModeOn,
+        },
+      });
+    };
+    this.handleSystemDarkModeChange = event => {
+      const isDarkModeOnNow = event.matches;
+      this.uppy.log(`[Dashboard] Dark mode is ${isDarkModeOnNow ? "on" : "off"}`);
+      this.setDarkModeCapability(isDarkModeOnNow);
+      const element = this.el;
+      const theme = isDarkModeOnNow ? "dark" : "light";
+      element.dataset.uppyTheme = theme;
+    };
     Object.defineProperty(this, _onUploadStart, {
       writable: true,
       value: () => {
@@ -186,11 +206,21 @@ export default class StatusBar extends UIPlugin {
     });
   }
   onMount() {
+    const {
+      capabilities,
+    } = this.uppy.getState();
     const element = this.el;
     const direction = getTextDirection(element);
     if (!direction) {
       element.dir = "ltr";
     }
+    let theme;
+    if (this.opts.theme === "auto") {
+      theme = capabilities.darkMode ? "dark" : "light";
+    } else {
+      theme = this.opts.theme;
+    }
+    element.dataset.uppyTheme = theme;
   }
   install() {
     const {
@@ -200,6 +230,17 @@ export default class StatusBar extends UIPlugin {
       this.mount(target, this);
     }
     this.uppy.on("upload", _classPrivateFieldLooseBase(this, _onUploadStart)[_onUploadStart]);
+    this.darkModeMediaQuery = typeof window !== "undefined" && window.matchMedia
+      ? window.matchMedia("(prefers-color-scheme: dark)")
+      : null;
+    const isDarkModeOnFromTheStart = this.darkModeMediaQuery ? this.darkModeMediaQuery.matches : false;
+    this.uppy.log(`[Dashboard] Dark mode is ${isDarkModeOnFromTheStart ? "on" : "off"}`);
+    this.setDarkModeCapability(isDarkModeOnFromTheStart);
+    if (this.opts.theme === "auto") {
+      var _this$darkModeMediaQu;
+      (_this$darkModeMediaQu = this.darkModeMediaQuery) == null
+        || _this$darkModeMediaQu.addListener(this.handleSystemDarkModeChange);
+    }
     _classPrivateFieldLooseBase(this, _lastUpdateTime)[_lastUpdateTime] = performance.now();
     _classPrivateFieldLooseBase(this, _previousUploadedBytes)[_previousUploadedBytes] = this.uppy.getFiles().reduce(
       (pv, file) => pv + file.progress.bytesUploaded,
@@ -207,6 +248,11 @@ export default class StatusBar extends UIPlugin {
     );
   }
   uninstall() {
+    if (this.opts.theme === "auto") {
+      var _this$darkModeMediaQu2;
+      (_this$darkModeMediaQu2 = this.darkModeMediaQuery) == null
+        || _this$darkModeMediaQu2.removeListener(this.handleSystemDarkModeChange);
+    }
     this.unmount();
     this.uppy.off("upload", _classPrivateFieldLooseBase(this, _onUploadStart)[_onUploadStart]);
   }

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	None	0	1.41 MB	bnjmnt4n
npm/[email protected]	None	0	89.1 kB	typescript-bot

View full report↗︎

[Murderlon]

See #5490 (comment)