fix: colors in md rendering

Author: isekovanic

examples/SampleApp/src/hooks/useStreamChatTheme.ts

@@ -17,6 +17,7 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           border: '#141924',
           button_background: '#FFFFFF',
           button_text: '#005FFF',
+          code_block: '#222222',
           grey: '#7A7A7A',
           grey_gainsboro: '#2D2F2F',
           grey_whisper: '#1C1E22',

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -88,7 +88,6 @@ const ReactiveScrollView = ({ children }: { children: ReactNode }) => {
 
 const defaultMarkdownStyles: MarkdownStyle = {
   codeBlock: {
-    backgroundColor: '#DDDDDD',
     fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
     fontWeight: '500',
     marginVertical: 8,
@@ -127,14 +126,12 @@ const defaultMarkdownStyles: MarkdownStyle = {
     marginTop: 8,
   },
   table: {
-    borderColor: '#222222',
     borderRadius: 3,
     borderWidth: 1,
     flex: 1,
     flexDirection: 'row',
   },
   tableHeader: {
-    backgroundColor: '#7A7A7A',
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
@@ -143,7 +140,6 @@ const defaultMarkdownStyles: MarkdownStyle = {
   },
   tableRow: {
     alignItems: 'center',
-    borderColor: '#222222',
     justifyContent: 'space-around',
   },
   tableRowCell: {
@@ -204,6 +200,8 @@ export const renderText = <
     },
     codeBlock: {
       ...defaultMarkdownStyles.codeBlock,
+      backgroundColor: colors.code_block,
+      color: colors.black,
       padding: 8,
       ...markdownStyles?.codeBlock,
     },
@@ -221,11 +219,13 @@ export const renderText = <
     },
     table: {
       ...defaultMarkdownStyles.table,
+      borderColor: colors.grey_dark,
       marginVertical: 8,
       ...markdownStyles?.table,
     },
     tableHeader: {
       ...defaultMarkdownStyles.tableHeader,
+      backgroundColor: colors.grey,
       ...markdownStyles?.tableHeader,
     },
     tableHeaderCell: {
@@ -239,6 +239,7 @@ export const renderText = <
     },
     tableRowCell: {
       ...defaultMarkdownStyles.tableRowCell,
+      borderColor: colors.grey_dark,
       padding: 5,
       ...markdownStyles?.tableRowCell,
     },

package/src/contexts/themeContext/utils/theme.ts

@@ -19,6 +19,7 @@ export const Colors = {
   black: '#000000',
   blue_alice: '#E9F2FF',
   border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+  code_block: '#DDDDDD',
   disabled: '#B4BBBA',
   grey: '#7A7A7A',
   grey_dark: '#72767E',