fix(Modal): 调整明暗主题色

Author: ChenlingasMx

packages/core/src/Grid/index.tsx

@@ -96,6 +96,7 @@ export default function Grid(props: GridProps) {
     onPress,
     ...otherProps
   } = props;
+  const textColor = theme.colors.primary_text || '#ccc';
   if (!Array.isArray(data)) {
     return null;
   }
@@ -123,7 +124,9 @@ export default function Grid(props: GridProps) {
       const itemContent = (
         <Fragment>
           {icon && <MaybeTextOrView style={iconStyle}>{icon}</MaybeTextOrView>}
-          <MaybeTextOrView style={[{ marginTop: 9, fontSize: 12 }, textStyle]}>{item.text}</MaybeTextOrView>
+          <MaybeTextOrView style={[{ marginTop: 9, fontSize: 12, color: textColor }, textStyle]}>
+            {item.text}
+          </MaybeTextOrView>
         </Fragment>
       );
       childItem!.push(

packages/core/src/Modal/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle } from 'react-native';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 let MainWidth = Dimensions.get('window').width;
 let MainHeight = Dimensions.get('window').height;
@@ -13,6 +15,7 @@ export interface ModalProps extends MaskLayerProps {
 
 const Modal = (props: ModalProps = {}) => {
   const { onClosed, visible, children, placement = 'bottom', containerStyle, ...otherProps } = props;
+  const theme = useTheme<Theme>();
   const AnimatedOpacity: Animated.Value = useRef(new Animated.Value(0)).current;
   // const [display] = useState<'none' | 'flex'>('none');
   let [layoutHeight, setLayoutHeight] = useState(0);
@@ -102,7 +105,12 @@ const Modal = (props: ModalProps = {}) => {
             // !layoutHeight && isVertical ? { display: display } : {},
             // !layoutWidth && isHorizontal ? { display: display } : {},
             // // getTransformStyle(),
-            { transform: [translateStyle], backgroundColor: '#fff', position: 'relative', zIndex: 10000 },
+            {
+              transform: [translateStyle],
+              backgroundColor: theme.colors.mask || '#fff',
+              position: 'relative',
+              zIndex: 10000,
+            },
           ]}
         >
           {children}

packages/core/src/theme/index.ts

@@ -103,7 +103,7 @@ const lightTheme = createTheme({
   colors: {
     ...palette,
     background: palette.gray50,
-    mask: palette.gray600,
+    mask: palette.white,
     border: palette.gray200,
     icon: palette.gray300,
     disabled: palette.gray200,
@@ -226,7 +226,7 @@ const darkPalette = {
   gray500: 'rgba(255, 255, 255, 0.8)',
   gray600: 'rgba(0, 0, 0, 0.4)',
   gray700: 'rgba(0, 0, 0, 0.04)',
-  gray800: 'transparent',
+  gray800: 'rgba(30, 30, 40, 0.7)',
   gray900: 'transparent',
 };
 
@@ -235,7 +235,7 @@ const darkTheme: Theme = {
   colors: {
     ...darkPalette,
     background: darkPalette.gray50,
-    mask: darkPalette.gray600,
+    mask: darkPalette.gray800,
     border: darkPalette.gray400,
     icon: darkPalette.gray300,
     disabled: darkPalette.gray200,