Add dark mode (#371)

.changeset/fresh-guests-report.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-crm": minor
+---
+
+Added dark mode and automatic color synchronization with Dashboard

apps/crm/src/lib/theme-synchronizer.tsx

@@ -0,0 +1,24 @@
+import { useAppBridge } from "@saleor/app-sdk/app-bridge";
+import { useTheme } from "@saleor/macaw-ui/next";
+import { memo, useEffect } from "react";
+
+export function ThemeSynchronizer() {
+  const { appBridgeState } = useAppBridge();
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    if (!setTheme || !appBridgeState?.theme) {
+      return;
+    }
+
+    if (appBridgeState.theme === "light") {
+      setTheme("defaultLight");
+    }
+
+    if (appBridgeState.theme === "dark") {
+      setTheme("defaultDark");
+    }
+  }, [appBridgeState?.theme, setTheme]);
+
+  return null;
+}

apps/crm/src/modules/providers/providers-list/providers-list.module.css

@@ -29,3 +29,7 @@
   width: 30px;
   height: 30px;
 }
+
+.list[data-macaw-theme="defaultDark"] :global(.darkmode-logo-invert) {
+  filter: invert(100%);
+}

apps/crm/src/modules/providers/providers-list/providers-list.tsx

@@ -1,11 +1,12 @@
 import { ProviderType } from "../providers-types";
 import MailchimpLogo from "../../../assets/mailchimp.svg";
+import MailchimpLogoDark from "../../../assets/mailchimp-dark.png";
 import SegmentLogo from "../../../assets/segment.png";
 import RudderstackLogo from "../../../assets/rudderstack.png";
 import { HTMLAttributes } from "react";
 import clsx from "clsx";
 import styles from "./providers-list.module.css";
-import { Box, MarketplaceIcon, Text } from "@saleor/macaw-ui/next";
+import { Box, MarketplaceIcon, Text, useTheme } from "@saleor/macaw-ui/next";
 import { TextLink } from "../../ui/text-link/text-link";
 
 type Props = {
@@ -14,8 +15,10 @@ type Props = {
 } & HTMLAttributes<HTMLUListElement>;
 
 export const ProvidersList = ({ className, onProviderClick, activeProvider, ...props }: Props) => {
+  const { theme } = useTheme();
+
   return (
-    <ul className={clsx(className, styles.list)}>
+    <ul className={clsx(className, styles.list)} data-macaw-theme={theme}>
       <li
         className={clsx(styles.item, {
           [styles.activeItem]: activeProvider === "mailchimp",
@@ -24,7 +27,11 @@ export const ProvidersList = ({ className, onProviderClick, activeProvider, ...p
           onProviderClick("mailchimp");
         }}
       >
-        <img alt="Mailchimp logo" className={styles.logo} src={MailchimpLogo.src} />
+        <img
+          alt="Mailchimp logo"
+          className={styles.logo}
+          src={theme === "defaultLight" ? MailchimpLogo.src : MailchimpLogoDark.src}
+        />
         <Text>Mailchimp</Text>
       </li>
       <li className={clsx(styles.item, styles.disabled)}>
@@ -37,7 +44,11 @@ export const ProvidersList = ({ className, onProviderClick, activeProvider, ...p
         </Box>
       </li>
       <li className={clsx(styles.item, styles.disabled)}>
-        <img alt="Rudderstack logo" className={styles.logo} src={RudderstackLogo.src} />
+        <img
+          alt="Rudderstack logo"
+          className={clsx(styles.logo, "darkmode-logo-invert")}
+          src={RudderstackLogo.src}
+        />
         <Box>
           <Text as="p" variant="caption" color="textNeutralDisabled">
             Coming soon

apps/crm/src/pages/_app.tsx

@@ -13,6 +13,7 @@ import { Box, ThemeProvider } from "@saleor/macaw-ui/next";
 import { NextPage } from "next";
 import { GraphQLProvider } from "../lib/graphql-provider";
 import { AppBridgeStorageSetter } from "../lib/app-bridge-persistence";
+import { ThemeSynchronizer } from "../lib/theme-synchronizer";
 
 /**
  * Ensure instance is a singleton.
@@ -49,6 +50,7 @@ function NextApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWi
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <GraphQLProvider>
           <ThemeProvider defaultTheme="defaultLight">
+            <ThemeSynchronizer />
             <RoutePropagator />
             <AppBridgeStorageSetter />
             <Box padding={8}>

apps/crm/src/styles/globals.css

@@ -2,6 +2,7 @@ body {
   color: var(--mu-colors-foreground-text-neutral-plain);
   padding: 0;
   margin: 0;
+  background: var(--mu-colors-background-plain);
 }
 
 code {