fea: support dark mode: update tokens and background

artsy · Jan 21, 2025 · 5396fdd · 5396fdd
1 parent 157b9ca
commit 5396fdd
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 14 deletions.
diff --git a/src/elements/Screen/Body.tsx b/src/elements/Screen/Body.tsx
@@ -24,7 +24,7 @@ export const Body: React.FC<BodyProps> = ({
         ? {}
         : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" })}
     >
-      <Flex flex={1} {...flexProps}>
+      <Flex flex={1} backgroundColor="background" {...flexProps}>
         <Flex flex={1} px={fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING}>
           {scroll ? <ScrollView>{children}</ScrollView> : children}
         </Flex>

diff --git a/src/elements/Screen/BottomView.tsx b/src/elements/Screen/BottomView.tsx
@@ -23,7 +23,7 @@ export const BottomView: React.FC<BottomViewProps> = ({ children, darkMode }) =>
         }}
         pointerEvents="none"
       />
-      <Flex px={SCREEN_HORIZONTAL_PADDING} pt={1} pb={4} backgroundColor="white100">
+      <Flex px={SCREEN_HORIZONTAL_PADDING} pt={1} pb={4} backgroundColor="background">
         {children}
       </Flex>
     </>

diff --git a/src/elements/Screen/FloatingHeader.tsx b/src/elements/Screen/FloatingHeader.tsx
@@ -28,6 +28,7 @@ export const FloatingHeader: React.FC<FloatingHeaderProps> = ({
       py={1}
       flexDirection="row"
       alignItems="center"
+      backgroundColor="background"
       {...flexProps}
     >
       <BackButtonWithBackground onPress={onBack} />

diff --git a/src/elements/Screen/Header.tsx b/src/elements/Screen/Header.tsx
@@ -46,7 +46,7 @@ export const Header: React.FC<HeaderProps> = ({
       flexDirection="row"
       px={2}
       zIndex={ZINDEX.header}
-      backgroundColor="white100"
+      backgroundColor="background"
       alignItems="center"
     >
       <Flex flex={1}>

diff --git a/src/elements/Screen/ScreenBase.tsx b/src/elements/Screen/ScreenBase.tsx
@@ -16,12 +16,7 @@ export const ScreenBase: React.FC<ScreenBaseProps> = ({
 
   return (
     <ScreenScrollContextProvider>
-      <Flex
-        flex={1}
-        backgroundColor="white100"
-        mt={safeArea ? (insets.top as FlexProps["mt"]) : 0}
-        {...flexProps}
-      >
+      <Flex flex={1} mt={safeArea ? (insets.top as FlexProps["mt"]) : 0} {...flexProps}>
         {children}
 
         <SafeAreaCover safeArea />
@@ -40,7 +35,6 @@ const SafeAreaCover: React.FC<{ safeArea: boolean }> = ({ safeArea }) => {
       right={0}
       top={safeArea ? -insets.top : 0}
       height={insets.top}
-      backgroundColor="white100"
     />
   )
 }
diff --git a/src/elements/Screen/StickySubHeader.tsx b/src/elements/Screen/StickySubHeader.tsx
@@ -68,7 +68,7 @@ export const StickySubHeader: React.FC<StickySubHeaderProps> = ({
         <Flex
           onLayout={(event) => handleLayout(event)}
           position="absolute"
-          backgroundColor="white100"
+          backgroundColor="background"
           zIndex={-1000}
           style={sharedStyles}
         >

diff --git a/src/elements/Tabs/TabFlashList.tsx b/src/elements/Tabs/TabFlashList.tsx
@@ -1,19 +1,22 @@
 import { FlashListProps } from "@shopify/flash-list"
 import { Tabs } from "react-native-collapsible-tab-view"
 import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll"
+import { useColor } from "../../utils/hooks"
 import { useSpace } from "../../utils/hooks/useSpace"
 
 export function TabFlashList<T>(props: FlashListProps<T>) {
   useListenForTabContentScroll()
 
   const space = useSpace()
+  const color = useColor()
 
   const contentContainerStyle = (props.contentContainerStyle ?? {}) as object
 
   return (
     <Tabs.FlashList
       contentContainerStyle={{
         paddingHorizontal: space(2),
+        backgroundColor: color("background"),
         ...contentContainerStyle,
       }}
       {...props}

diff --git a/src/elements/Tabs/TabFlatList.tsx b/src/elements/Tabs/TabFlatList.tsx
@@ -1,19 +1,22 @@
 import { FlatListProps } from "react-native"
 import { Tabs } from "react-native-collapsible-tab-view"
 import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll"
+import { useColor } from "../../utils/hooks"
 import { useSpace } from "../../utils/hooks/useSpace"
 
 export function TabFlatList<T>(props: FlatListProps<T>) {
   useListenForTabContentScroll()
 
   const space = useSpace()
+  const color = useColor()
 
   const contentContainerStyle = (props.contentContainerStyle ?? {}) as object
 
   return (
     <Tabs.FlatList
       contentContainerStyle={{
         marginHorizontal: space(2),
+        backgroundColor: color("background"),
         ...contentContainerStyle,
       }}
       {...props}

diff --git a/src/elements/Tabs/TabMasonry.tsx b/src/elements/Tabs/TabMasonry.tsx
@@ -2,6 +2,7 @@ import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list"
 import { RefObject } from "react"
 import { Tabs } from "react-native-collapsible-tab-view"
 import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll"
+import { useColor } from "../../utils/hooks"
 import { useSpace } from "../../utils/hooks/useSpace"
 
 export function TabMasonry<T>(
@@ -12,13 +13,15 @@ export function TabMasonry<T>(
   useListenForTabContentScroll()
 
   const space = useSpace()
+  const color = useColor()
 
   const contentContainerStyle = (props.contentContainerStyle ?? {}) as object
 
   return (
     <Tabs.MasonryFlashList
       contentContainerStyle={{
         paddingHorizontal: space(2),
+        backgroundColor: color("background"),
         ...contentContainerStyle,
       }}
       {...props}

diff --git a/src/elements/Tabs/TabScrollView.tsx b/src/elements/Tabs/TabScrollView.tsx
@@ -1,12 +1,14 @@
 import { ScrollViewProps } from "react-native"
 import { Tabs } from "react-native-collapsible-tab-view"
 import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll"
+import { useColor } from "../../utils/hooks"
 import { useSpace } from "../../utils/hooks/useSpace"
 
 export const TabScrollView: React.FC<ScrollViewProps> = (props) => {
   useListenForTabContentScroll()
 
   const space = useSpace()
+  const color = useColor()
 
   const contentContainerStyle = (props.contentContainerStyle ?? {}) as object
 
@@ -18,6 +20,7 @@ export const TabScrollView: React.FC<ScrollViewProps> = (props) => {
       accessibilityTraits={undefined}
       contentContainerStyle={{
         marginHorizontal: space(2),
+        backgroundColor: color("background"),
         ...contentContainerStyle,
       }}
       {...props}

diff --git a/src/elements/Tabs/TabsContainer.tsx b/src/elements/Tabs/TabsContainer.tsx
@@ -49,7 +49,7 @@ export const TabsContainer: React.FC<TabsContainerProps> = ({
         shadowOpacity: 0,
         shadowRadius: 0,
         elevation: 0,
-        backgroundColor: color("white100"),
+        backgroundColor: color("background"),
       }}
       initialTabName={initialTabName}
       containerStyle={{

diff --git a/src/svgs/Icon.tsx b/src/svgs/Icon.tsx
@@ -54,7 +54,7 @@ export const Icon = styled(ScaledSvg)<IconProps>`
 
 Icon.defaultProps = {
   // @ts-ignore
-  fill: "black",
+  fill: "black100",
   height: DEFAULT_SIZE,
   width: DEFAULT_SIZE,
 }

diff --git a/src/tokens.ts b/src/tokens.ts
@@ -111,8 +111,14 @@ const v3dark: ThemeWithDarkModeType = {
   ...v3,
   colors: {
     ...THEME_DARK.colors,
+    black10: v3.colors.black60,
+    black30: v3.colors.black60,
+    black60: v3.colors.black30,
+    blue100: "#5E6EFF",
+    red100: "#E44738",
+    green100: "#16C193",
     devpurple: "rgb(136, 82, 237)",
-    background: THEME_DARK.colors.black100,
+    background: "#121212",
     onBackground: THEME_DARK.colors.white100,
     onBackgroundHigh: THEME_DARK.colors.white100,
     onBackgroundMedium: THEME_DARK.colors.black30,