Adds theme option to StatusBar

transloadit · Oct 24, 2024 · 03099eb · 03099eb
1 parent f8df085
commit 03099eb
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/packages/@uppy/status-bar/CHANGELOG.md b/packages/@uppy/status-bar/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @uppy/status-bar
 
+## 4.0.4
+
+Released: 2024-10-24
+<!-- Included in: Uppy v4.2.1 -->
+
+- @uppy/status-bar: Add theme option (Anthony Veaudry / #5490)
+
 ## 4.0.3
 
 Released: 2024-08-20

diff --git a/packages/@uppy/status-bar/README.md b/packages/@uppy/status-bar/README.md
@@ -27,6 +27,7 @@ import StatusBar from '@uppy/status-bar'
 const uppy = new Uppy()
 uppy.use(StatusBar, {
   target: 'body',
+  theme: 'light',
   hideUploadButton: false,
   showProgressDetails: false,
   hideAfterFinish: true,

diff --git a/packages/@uppy/status-bar/package.json b/packages/@uppy/status-bar/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uppy/status-bar",
   "description": "A progress bar for Uppy, with many bells and whistles.",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "license": "MIT",
   "main": "lib/index.js",
   "style": "dist/style.min.css",

diff --git a/packages/@uppy/status-bar/src/StatusBar.tsx b/packages/@uppy/status-bar/src/StatusBar.tsx
@@ -65,6 +65,7 @@ const defaultOptions = {
   showProgressDetails: false,
   hideAfterFinish: true,
   doneButtonHandler: null,
+  theme: 'light',
 } satisfies StatusBarOptions
 
 /**
@@ -78,6 +79,8 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
+  private darkModeMediaQuery!: MediaQueryList | null
+
   #lastUpdateTime!: ReturnType<typeof performance.now>
 
   #previousUploadedBytes!: number | null
@@ -231,12 +234,44 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   onMount(): void {
-    // Set the text direction if the page has not defined one.
+    const { capabilities } = this.uppy.getState()
     const element = this.el!
+
+    // Set the text direction if the page has not defined one.
     const direction = getTextDirection(element)
     if (!direction) {
       element.dir = 'ltr'
     }
+
+    // Set the theme
+    let theme
+    if (this.opts.theme === 'auto') {
+      theme = capabilities.darkMode ? 'dark' : 'light'
+    } else {
+      theme = this.opts.theme
+    }
+
+    element.dataset.uppyTheme = theme
+  }
+
+  setDarkModeCapability = (isDarkModeOn: boolean): void => {
+    const { capabilities } = this.uppy.getState()
+    this.uppy.setState({
+      capabilities: {
+        ...capabilities,
+        darkMode: isDarkModeOn,
+      },
+    })
+  }
+
+  private handleSystemDarkModeChange = (event: MediaQueryListEvent) => {
+    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
   }
 
   #onUploadStart = (): void => {
@@ -267,6 +302,23 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
     }
     this.uppy.on('upload', this.#onUploadStart)
 
+    // Dark Mode / theme
+    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') {
+      this.darkModeMediaQuery?.addListener(this.handleSystemDarkModeChange)
+    }
+
     // To cover the use case where the status bar is installed while the upload
     // has started, we set `lastUpdateTime` right away.
     this.#lastUpdateTime = performance.now()
@@ -276,6 +328,10 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   uninstall(): void {
+    if (this.opts.theme === 'auto') {
+      this.darkModeMediaQuery?.removeListener(this.handleSystemDarkModeChange)
+    }
+
     this.unmount()
     this.uppy.off('upload', this.#onUploadStart)
   }

diff --git a/packages/@uppy/status-bar/src/StatusBarOptions.ts b/packages/@uppy/status-bar/src/StatusBarOptions.ts
@@ -10,4 +10,5 @@ export interface StatusBarOptions extends UIPluginOptions {
   hideCancelButton?: boolean
   doneButtonHandler?: (() => void) | null
   locale?: typeof StatusBarLocale
+  theme?: 'auto' | 'dark' | 'light'
 }