diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index e17a72d356..fcd64b8fa6 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -172,6 +172,7 @@ const Banner = ({
     <Surface
       {...rest}
       style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
+      theme={theme}
     >
       <View style={[styles.wrapper, contentStyle]}>
         <Animated.View style={{ height }} />
@@ -197,7 +198,9 @@ const Banner = ({
                 <Icon source={icon} size={40} />
               </View>
             ) : null}
-            <Text style={styles.message}>{children}</Text>
+            <Text style={[styles.message, { color: theme.colors.text }]}>
+              {children}
+            </Text>
           </View>
           <View style={styles.actions}>
             {actions.map(({ label, ...others }, i) => (
@@ -205,7 +208,8 @@ const Banner = ({
                 key={/* eslint-disable-line react/no-array-index-key */ i}
                 compact
                 mode="text"
-                style={styles.button}
+                style={[styles.button]}
+                color={theme.colors.primary}
                 {...others}
               >
                 {label}
diff --git a/src/components/__tests__/Banner.test.js b/src/components/__tests__/Banner.test.js
index fbb78b4de7..66746bc997 100644
--- a/src/components/__tests__/Banner.test.js
+++ b/src/components/__tests__/Banner.test.js
@@ -91,3 +91,25 @@ it('renders visible banner, with action buttons and with image', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('render visible banner, with custom theme', () => {
+  const tree = renderer
+    .create(
+      <Banner
+        visible
+        theme={{
+          colors: {
+            text: '#00f',
+            surface: '#ccc',
+            primary: '#043',
+          },
+        }}
+        actions={[{ label: 'first', onPress: () => {} }]}
+      >
+        Custom theme
+      </Banner>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index 91dccd28b7..44b6c53883 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -1,5 +1,195 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`render visible banner, with custom theme 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ccc",
+      "elevation": 1,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0.5,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0.75,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "height": 0,
+        }
+      }
+    />
+    <View
+      onLayout={[Function]}
+      style={Object {}}
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "System",
+                "fontWeight": "400",
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#00f",
+                },
+              ],
+            ]
+          }
+        >
+          Custom theme
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "transparent",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "elevation": 0,
+              "margin": 4,
+              "minWidth": "auto",
+            }
+          }
+        >
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "disabled": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 4,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "System",
+                      "fontWeight": "400",
+                    },
+                    Object {
+                      "textAlign": "left",
+                    },
+                    Array [
+                      Object {
+                        "letterSpacing": 1,
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "marginHorizontal": 8,
+                      },
+                      Object {
+                        "textTransform": "uppercase",
+                      },
+                      Object {
+                        "color": "#043",
+                        "fontFamily": "System",
+                        "fontWeight": "500",
+                      },
+                      Object {
+                        "fontFamily": "System",
+                        "fontWeight": "500",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                first
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders hidden banner, without action buttons and without image 1`] = `
 <View
   style={
@@ -74,10 +264,15 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
               Object {
                 "textAlign": "left",
               },
-              Object {
-                "flex": 1,
-                "margin": 8,
-              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#000000",
+                },
+              ],
             ]
           }
         >
@@ -161,10 +356,15 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
               Object {
                 "textAlign": "left",
               },
-              Object {
-                "flex": 1,
-                "margin": 8,
-              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#000000",
+                },
+              ],
             ]
           }
         >
@@ -346,10 +546,15 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               Object {
                 "textAlign": "left",
               },
-              Object {
-                "flex": 1,
-                "margin": 8,
-              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#000000",
+                },
+              ],
             ]
           }
         >
@@ -630,10 +835,15 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
               Object {
                 "textAlign": "left",
               },
-              Object {
-                "flex": 1,
-                "margin": 8,
-              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#000000",
+                },
+              ],
             ]
           }
         >
@@ -716,10 +926,15 @@ exports[`renders visible banner, without action buttons and without image 1`] =
               Object {
                 "textAlign": "left",
               },
-              Object {
-                "flex": 1,
-                "margin": 8,
-              },
+              Array [
+                Object {
+                  "flex": 1,
+                  "margin": 8,
+                },
+                Object {
+                  "color": "#000000",
+                },
+              ],
             ]
           }
         >