fix: colors in md rendering

GetStream · Nov 29, 2024 · 3df4d7a · 3df4d7a
1 parent 27b9b78
commit 3df4d7a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/examples/SampleApp/src/hooks/useStreamChatTheme.ts b/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',

diff --git a/package/src/components/Message/MessageSimple/utils/renderText.tsx b/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,
     },

diff --git a/package/src/contexts/themeContext/utils/theme.ts b/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',