feat: add dark mode [part 1]

Gemfile.lock

@@ -18,20 +18,20 @@ GEM
     artifactory (3.0.17)
     atomos (0.1.3)
     aws-eventstream (1.3.0)
-    aws-partitions (1.1027.0)
-    aws-sdk-core (3.214.0)
+    aws-partitions (1.1040.0)
+    aws-sdk-core (3.216.0)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.96.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-kms (1.97.0)
+      aws-sdk-core (~> 3, >= 3.216.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.176.1)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-s3 (1.178.0)
+      aws-sdk-core (~> 3, >= 3.216.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.10.1)
+    aws-sigv4 (1.11.0)
       aws-eventstream (~> 1, >= 1.0.2)
     babosa (1.0.4)
     base64 (0.2.0)
@@ -128,7 +128,7 @@ GEM
     faraday-retry (1.0.3)
     faraday_middleware (1.2.1)
       faraday (~> 1.0)
-    fastimage (2.3.1)
+    fastimage (2.4.0)
     fastlane (2.225.0)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.8, < 3.0.0)
@@ -252,7 +252,7 @@ GEM
     nkf (0.2.0)
     optparse (0.6.0)
     os (1.1.4)
-    plist (3.7.1)
+    plist (3.7.2)
     public_suffix (4.0.7)
     rake (13.2.1)
     representable (3.2.0)
@@ -264,7 +264,7 @@ GEM
     rouge (2.0.7)
     ruby-macho (2.5.1)
     ruby2_keywords (0.0.5)
-    rubyzip (2.3.2)
+    rubyzip (2.4.1)
     security (0.1.5)
     signet (0.19.0)
       addressable (~> 2.8)

package.json

@@ -109,7 +109,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.227.0",
-    "@artsy/palette-mobile": "14.0.16",
+    "@artsy/palette-mobile": "14.0.17--canary.299.3057.0",
     "@artsy/to-title-case": "1.1.0",
     "@braze/react-native-sdk": "11.0.0",
     "@expo/react-native-action-sheet": "4.0.1",
@@ -223,6 +223,7 @@
     "@react-native/eslint-config": "0.76.5",
     "@react-native/metro-config": "0.76.5",
     "@react-native/typescript-config": "0.76.5",
+    "@sentry/cli": "2.41.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/react-native": "12.9.0",
     "@types/argparse": "2.0.10",

src/app/Components/AnimatableHeader/AnimatableHeader.tsx

@@ -14,7 +14,7 @@ export interface AnimatableHeaderProps {
 
 export const AnimatableHeader = (props: AnimatableHeaderProps) => {
   const { title, rightButtonDisabled, rightButtonText, onRightButtonPress } = props
-  const { space } = useTheme()
+  const { space, color } = useTheme()
   const { headerHeight, setTitle, titleShown } = useAnimatableHeaderContext()
 
   useEffect(() => {
@@ -28,7 +28,7 @@ export const AnimatableHeader = (props: AnimatableHeaderProps) => {
         paddingHorizontal: space(2),
         alignItems: "center",
         height: headerHeight,
-        backgroundColor: "white",
+        backgroundColor: color("white100"),
       }}
     >
       <TouchableOpacity

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

@@ -8,6 +8,7 @@ import {
   Spacer,
   Tabs,
   Text,
+  useColor,
   useScreenDimensions,
   useSpace,
 } from "@artsy/palette-mobile"
@@ -57,6 +58,8 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
   searchCriteria,
   ...props
 }) => {
+  const color = useColor()
+
   const [isCreateAlertModalVisible, setIsCreateAlertModalVisible] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const { showFilterArtworksModal, closeFilterArtworksModal } = useShowArtworksFilterModal({
@@ -258,7 +261,7 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
   }
 
   return (
-    <>
+    <Flex backgroundColor={color("white100")} flex={1}>
       <Tabs.Masonry
         data={artworks}
         numColumns={NUM_COLUMNS_MASONRY}
@@ -317,7 +320,7 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         onComplete={handleCompleteSavedSearch}
         visible={isCreateAlertModalVisible}
       />
-    </>
+    </Flex>
   )
 }
 

src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx

@@ -29,7 +29,7 @@ export const ArtistArtworksFilterHeader: React.FC<ArtistArtworksFilterProps> = (
   const { openFilterArtworksModal } = useShowArtworksFilterModal({ artist: data })
 
   return (
-    <Box backgroundColor="white">
+    <Box backgroundColor="white100">
       <ArtworksFilterHeader
         onFilterPress={() => {
           openFilterArtworksModal("sortAndFilter")

src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx

@@ -26,7 +26,7 @@ export const SavedSearchButtonV2: React.FC<SavedSearchButtonV2Props> = (props) =
           onPress={handlePress}
           render={({ color }) => (
             <Flex flexDirection="row" alignItems="center">
-              <Box backgroundColor="white">
+              <Box backgroundColor="white100">
                 <BellIcon fill={color} width="16px" height="16px" />
               </Box>
               <Text variant="xs" color={color} ml={0.5} numberOfLines={1} lineHeight="16px">

src/app/Components/ArtsyWebView.tsx

@@ -2,6 +2,7 @@ import { OwnerType } from "@artsy/cohesion"
 import { Flex, Screen, Text } from "@artsy/palette-mobile"
 import * as Sentry from "@sentry/react-native"
 import { addBreadcrumb } from "@sentry/react-native"
+import { NavigationHeader } from "app/Components/NavigationHeader"
 import { BottomTabRoutes } from "app/Scenes/BottomTabs/bottomTabsConfig"
 import { GlobalStore, getCurrentEmissionState } from "app/store/GlobalStore"
 import { GoBackProps, dismissModal, goBack, navigate } from "app/system/navigation/navigate"
@@ -20,7 +21,6 @@ import { Edge } from "react-native-safe-area-context"
 import Share from "react-native-share"
 import WebView, { WebViewNavigation, WebViewProps } from "react-native-webview"
 import { useTracking } from "react-tracking"
-import { NavigationHeader } from "app/Components/NavigationHeader"
 
 export interface ArtsyWebViewConfig {
   title?: string
@@ -130,7 +130,7 @@ export const ArtsyWebViewPage = ({
 
   return (
     <Screen>
-      <Flex flex={1} backgroundColor="white">
+      <Flex flex={1} backgroundColor="white100">
         <ArtsyKeyboardAvoidingView>
           <NavigationHeader
             useXButton={!!isPresentedModally && !canGoBack}

src/app/Components/ArtworkFilter/ArtworkFilterNavigator.tsx

@@ -1,4 +1,5 @@
 import { ActionType, ContextModule, OwnerType, TappedCreateAlert } from "@artsy/cohesion"
+import { useColor } from "@artsy/palette-mobile"
 import { NavigationContainer } from "@react-navigation/native"
 import { TransitionPresets, createStackNavigator } from "@react-navigation/stack"
 import { CreateSavedSearchModal } from "app/Components/Artist/ArtistArtworks/CreateSavedSearchModal"
@@ -31,6 +32,7 @@ import { TimePeriodOptionsScreen } from "app/Components/ArtworkFilter/Filters/Ti
 import { ViewAsOptionsScreen } from "app/Components/ArtworkFilter/Filters/ViewAsOptions"
 import { WaysToBuyOptionsScreen } from "app/Components/ArtworkFilter/Filters/WaysToBuyOptions"
 import { YearOptionsScreen } from "app/Components/ArtworkFilter/Filters/YearOptions"
+import { useNavigationTheme } from "app/Navigation/useNavigationTheme"
 import { GlobalStore } from "app/store/GlobalStore"
 import { OwnerEntityTypes, PageNames } from "app/utils/track/schema"
 import { useLocalizedUnit } from "app/utils/useLocalizedUnit"
@@ -105,6 +107,9 @@ export type ArtworkFilterNavigationStack = {
 const Stack = createStackNavigator<ArtworkFilterNavigationStack>()
 
 export const ArtworkFilterNavigator: React.FC<ArtworkFilterProps> = (props) => {
+  const theme = useNavigationTheme()
+  const color = useColor()
+
   const tracking = useTracking()
   const { id, mode, slug, name, query, shouldShowCreateAlertButton, closeModal, exitModal } = props
   const [isCreateAlertModalVisible, setIsCreateAlertModalVisible] = useState(false)
@@ -312,16 +317,16 @@ export const ArtworkFilterNavigator: React.FC<ArtworkFilterProps> = (props) => {
   }, [])
 
   return (
-    <NavigationContainer independent>
+    <NavigationContainer independent theme={theme}>
       <Modal visible={props.visible} onDismiss={handleClosingModal} animationType="slide">
-        <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
+        <SafeAreaView edges={["top"]} style={{ flex: 1, backgroundColor: color("white100") }}>
           <Stack.Navigator
             // force it to not use react-native-screens, which is broken inside a react-native Modal for some reason
             detachInactiveScreens={false}
             screenOptions={{
               ...TransitionPresets.SlideFromRightIOS,
               headerShown: false,
-              cardStyle: { backgroundColor: "white" },
+              cardStyle: { backgroundColor: color("white100") },
             }}
           >
             <Stack.Screen

src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tests.tsx

@@ -7,7 +7,7 @@ describe("Colors swatch", () => {
     const selectedTree = renderWithWrappersLEGACY(
       <ColorsSwatch
         width={30}
-        backgroundColor="black"
+        backgroundColor="black100"
         foregroundColor="#fff"
         name="blue"
         selected
@@ -19,7 +19,7 @@ describe("Colors swatch", () => {
     const unselectedTree = renderWithWrappersLEGACY(
       <ColorsSwatch
         width={30}
-        backgroundColor="black"
+        backgroundColor="black100"
         foregroundColor="#fff"
         name="blue"
         selected={false}

src/app/Components/ArtworkFilter/components/ArtworkFilterApplyButton.tsx

@@ -83,14 +83,14 @@ export const ArtworkFilterApplyButton: React.FC<ArtworkFilterApplyButtonProps> =
           shadowOpacity: 0.1,
           shadowRadius: 12,
           elevation: 12,
-          backgroundColor: "white",
+          backgroundColor: color("white100"),
           // the bottom padding that is created by safeareaview in almost all > X apple devices
           // is somewhere around 35px. This is a hack to make sure that the button is
           // displayed 40px above the bottom of the screen.
           paddingBottom: -15,
         }}
       >
-        <Box p={2} backgroundColor="white">
+        <Box p={2} backgroundColor="white100">
           <Box
             height={50}
             borderRadius={50}

src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx

@@ -22,7 +22,7 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
     case curatorsPick && !hideCuratorsPick:
       return (
         <Box alignItems="center" flexDirection="row">
-          <FireIcon />
+          <FireIcon fill="black100" />
           <Text color={primaryColor} variant="xs" textAlign="center">
             {" "}
             Curators’ Pick
@@ -33,7 +33,7 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
     case increasedInterest && !hideIncreasedInterest:
       return (
         <Box flexDirection="row" alignItems="center">
-          <ArrowUpRightIcon />
+          <ArrowUpRightIcon fill="black100" />
           <Text color={primaryColor} variant="xs">
             {" "}
             Increased Interest

src/app/Components/ArtworkGrids/InfiniteScrollArtworksGrid.tsx

@@ -461,7 +461,7 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
             style={{ opacity: localIsLoading && hasMore() ? 1 : 0 }}
           >
             {!!autoFetch && (
-              <ActivityIndicator color={Platform.OS === "android" ? "black" : undefined} />
+              <ActivityIndicator color={Platform.OS === "android" ? "black100" : undefined} />
             )}
           </Flex>
         )}

src/app/Components/AuctionResultsList.tsx

@@ -73,7 +73,7 @@ export const AuctionResultsList: React.FC<AuctionResultsListProps> = ({
         ListHeaderComponent={ListHeaderComponent}
         ItemSeparatorComponent={() => <Flex mt={2} />}
         renderSectionHeader={({ section: { sectionTitle } }) => (
-          <Flex bg="white" mx={2}>
+          <Flex backgroundColor="white100" mx={2}>
             <Text my={2} variant="sm-display">
               {sectionTitle}
             </Text>

src/app/Components/BottomSheet/AutomountedBottomSheetModal.tsx

@@ -1,4 +1,4 @@
-import { useScreenDimensions } from "@artsy/palette-mobile"
+import { useColor, useScreenDimensions } from "@artsy/palette-mobile"
 import {
   BottomSheetBackdropProps,
   BottomSheetModal,
@@ -18,6 +18,7 @@ export const AutomountedBottomSheetModal: FC<AutomountedBottomSheetModalProps> =
   closeOnBackdropClick = true,
   ...rest
 }) => {
+  const color = useColor()
   const ref = useRef<BottomSheetModal>(null)
   const [modalIsPresented, setModalIsPresented] = useState(false)
   const { height: screenHeight, safeAreaInsets } = useScreenDimensions()
@@ -78,6 +79,10 @@ export const AutomountedBottomSheetModal: FC<AutomountedBottomSheetModalProps> =
       backdropComponent={renderBackdrop}
       enableDynamicSizing
       maxDynamicContentSize={screenHeight - safeAreaInsets.top}
+      backgroundStyle={{
+        ...(rest?.backgroundStyle as any),
+        backgroundColor: color("white100"),
+      }}
       {...rest}
     />
   )

src/app/Components/BottomSheet/DefaultBottomSheetBackdrop.tsx

@@ -19,7 +19,6 @@ export const DefaultBottomSheetBackdrop: React.FC<DefaultBottomSheetBackdrop> =
   style,
 }) => {
   const color = useColor()
-
   // animated variables
   const containerAnimatedStyle = useAnimatedStyle(() => {
     "worklet"
@@ -33,6 +32,7 @@ export const DefaultBottomSheetBackdrop: React.FC<DefaultBottomSheetBackdrop> =
     () => [
       style,
       {
+        // We intentionally want the background color to be black regardless of the theme
         backgroundColor: color("black100"),
       },
       containerAnimatedStyle,

src/app/Components/Buttons/DarkNavigationButton.tsx

@@ -1,4 +1,5 @@
-import { Flex, Box, ClassTheme, Text } from "@artsy/palette-mobile"
+import { Flex, Box, Text } from "@artsy/palette-mobile"
+import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme"
 import { navigate } from "app/system/navigation/navigate"
 import React from "react"
 import { Image, TouchableWithoutFeedback } from "react-native"
@@ -13,7 +14,7 @@ export default class DarkNavigationButton extends React.Component<Props, any> {
   render() {
     const showNavArrow = this.props.href || this.props.onPress
     return (
-      <ClassTheme>
+      <ThemeAwareClassTheme>
         {({ color }) => (
           <Box px={2} py={1} style={{ backgroundColor: color("black100") }}>
             <TouchableWithoutFeedback onPress={this.openLink.bind(this)}>
@@ -28,7 +29,7 @@ export default class DarkNavigationButton extends React.Component<Props, any> {
             </TouchableWithoutFeedback>
           </Box>
         )}
-      </ClassTheme>
+      </ThemeAwareClassTheme>
     )
   }
 

src/app/Components/Countdown/CountdownTimer.tests.tsx

@@ -17,10 +17,10 @@ const CountdownText: React.FC<CountdownTimerProps> = ({ duration, label }) => (
   <Flex justifyContent="center" alignItems="center">
     <LabeledTicker
       renderSeparator={() => <Spacer x={0.5} />}
-      textProps={{ color: "white", variant: "sm" }}
+      textProps={{ color: "white100", variant: "sm" }}
       duration={duration}
     />
-    <Text variant="xs" color="white">
+    <Text variant="xs" color="white100">
       {label}
     </Text>
   </Flex>

src/app/Components/CreditCardField/CreditCardField.tsx

@@ -60,7 +60,6 @@ export const CreditCardField: React.FC<CreditCardFieldProps> = ({ onCardChange }
     return {
       zIndex: 100,
       position: "absolute",
-      backgroundColor: "white",
       left: withTiming(
         hasSelectedValue || isFocused ? 15 : STRIPE_CREDIT_CARD_ICON_CONTAINER_WIDTH
       ),
@@ -113,7 +112,7 @@ export const CreditCardField: React.FC<CreditCardFieldProps> = ({ onCardChange }
         />
       </AnimatedFlex>
       <Flex pointerEvents="none" style={{ position: "absolute" }}>
-        <AnimatedText style={labelStyles}>
+        <AnimatedText style={[{ backgroundColor: color("white100") }, labelStyles]}>
           {hasSelectedValue || isFocused ? "Credit Card" : ""}
         </AnimatedText>
       </Flex>

src/app/Components/DarkModeClassTheme.tsx

@@ -0,0 +1,19 @@
+import { ClassTheme, useTheme } from "@artsy/palette-mobile"
+import { GlobalStore } from "app/store/GlobalStore"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+
+export const ThemeAwareClassTheme = ({
+  children,
+}: {
+  children: React.ReactNode | ((helpers: ReturnType<typeof useTheme>) => React.ReactNode)
+}) => {
+  const supportDarkMode = useFeatureFlag("ARDarkModeSupport")
+  const darkMode = GlobalStore.useAppState((state) => state.devicePrefs.colorScheme)
+
+  return (
+    // @ts-expect-error
+    <ClassTheme theme={supportDarkMode ? (darkMode === "dark" ? "v3dark" : "v3light") : undefined}>
+      {typeof children === "function" ? children : children}
+    </ClassTheme>
+  )
+}