Fix harmony system-appearance (#7706)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -5,7 +5,8 @@ import {
   Client,
   SmartCollectionVariant,
   Status,
-  Theme
+  Theme,
+  SystemAppearance
 } from '@audius/common/models'
 import { StringKeys, FeatureFlags } from '@audius/common/services'
 import {
@@ -182,12 +183,15 @@ import {
   PURCHASES_PAGE,
   SALES_PAGE
 } from 'utils/route'
-import { getTheme as getSystemTheme } from 'utils/theme/theme'
+import {
+  doesPreferDarkMode,
+  getTheme as getSystemTheme
+} from 'utils/theme/theme'
 
 import styles from './WebPlayer.module.css'
 
-const { setTheme } = themeActions
-const { getTheme } = themeSelectors
+const { setTheme, setSystemAppearance } = themeActions
+const { getTheme, getSystemAppearance } = themeSelectors
 
 const { getHasAccount, getAccountStatus, getUserId, getUserHandle } =
   accountSelectors
@@ -374,9 +378,16 @@ class WebPlayer extends Component {
   }
 
   handleTheme() {
+    const { theme, systemAppearance, setTheme, setSystemAppearance } =
+      this.props
     // Set local theme
-    if (this.props.theme === null) {
-      this.props.setTheme(getSystemTheme() || Theme.DEFAULT)
+    if (theme === null) {
+      setTheme(getSystemTheme() || Theme.DEFAULT)
+    }
+    if (systemAppearance === null) {
+      setSystemAppearance(
+        doesPreferDarkMode() ? SystemAppearance.DARK : SystemAppearance.LIGHT
+      )
     }
   }
 
@@ -1010,12 +1021,15 @@ const mapStateToProps = (state) => ({
   accountStatus: getAccountStatus(state),
   signOnStatus: getSignOnStatus(state),
   theme: getTheme(state),
+  systemAppearance: getSystemAppearance(state),
   showCookieBanner: getShowCookieBanner(state),
   isChatEnabled: getFeatureEnabled(FeatureFlags.CHAT_ENABLED)
 })
 
 const mapDispatchToProps = (dispatch) => ({
   setTheme: (theme) => dispatch(setTheme({ theme })),
+  setSystemAppearance: (systemAppearance) =>
+    dispatch(setSystemAppearance({ systemAppearance })),
   updateRouteOnSignUpCompletion: (route) =>
     dispatch(updateRouteOnSignUpCompletion(route)),
   openSignOn: (signIn = true, page = null, fields = {}) =>

packages/web/src/store/application/ui/theme/sagas.ts

@@ -1,12 +1,16 @@
-import { Theme } from '@audius/common/models'
+import { SystemAppearance, Theme } from '@audius/common/models'
 import { themeActions } from '@audius/common/store'
 import { actionChannelDispatcher } from '@audius/common/utils'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { eventChannel } from 'redux-saga'
 import { spawn, takeEvery } from 'redux-saga/effects'
 
-import { setTheme, PREFERS_DARK_MEDIA_QUERY } from 'utils/theme/theme'
-const { setTheme: setThemeAction } = themeActions
+import {
+  setTheme,
+  PREFERS_DARK_MEDIA_QUERY,
+  doesPreferDarkMode
+} from 'utils/theme/theme'
+const { setTheme: setThemeAction, setSystemAppearance } = themeActions
 
 // `window.matchMedia` can be undefined in some environments (testing and outdated browsers).
 const mql =
@@ -25,6 +29,13 @@ function* setThemeAsync(action: PayloadAction<{ theme: Theme }>) {
   if (theme === Theme.AUTO && mql) {
     const channel = eventChannel((emitter) => {
       mqlListener = () => {
+        emitter(
+          setSystemAppearance({
+            systemAppearance: doesPreferDarkMode()
+              ? SystemAppearance.DARK
+              : SystemAppearance.LIGHT
+          })
+        )
         emitter(setThemeAction({ theme: Theme.AUTO }))
       }
       mql.addListener(mqlListener)

packages/web/src/utils/theme/theme.ts

@@ -35,7 +35,7 @@ const applyTheme = (theme: Theme) => {
   document.documentElement.setAttribute('data-theme', getThemeNameKey(theme))
 }
 
-const doesPreferDarkMode = () => {
+export const doesPreferDarkMode = () => {
   return (
     window.matchMedia && window.matchMedia(PREFERS_DARK_MEDIA_QUERY).matches
   )