From a8f472c8427ac2c59d635dbc9ed56241b1cb1adc Mon Sep 17 00:00:00 2001
From: Sergio Estevao <sergioestevao@gmail.com>
Date: Fri, 3 Jul 2020 22:07:40 +0100
Subject: [PATCH] Fix quote left border color in dark mode.

---
 .../primitives/src/block-quotation/index.native.js  | 13 ++++++++++---
 .../src/block-quotation/style.native.scss           | 13 +++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
index 6d34fdc0b5aee..076314e378215 100644
--- a/packages/primitives/src/block-quotation/index.native.js
+++ b/packages/primitives/src/block-quotation/index.native.js
@@ -6,12 +6,19 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Children, cloneElement } from '@wordpress/element';
+import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export const BlockQuotation = ( props ) => {
+export const BlockQuotation = withPreferredColorScheme( ( props ) => {
+	const { getStylesFromColorScheme } = props;
+
+	const blockQuoteStyle = getStylesFromColorScheme(
+		styles.wpBlockQuoteLight,
+		styles.wpBlockQuoteDark
+	);
 	const newChildren = Children.map( props.children, ( child ) => {
 		if ( child && child.props.identifier === 'citation' ) {
 			return cloneElement( child, {
@@ -23,5 +30,5 @@ export const BlockQuotation = ( props ) => {
 		}
 		return child;
 	} );
-	return <View style={ styles.wpBlockQuote }>{ newChildren }</View>;
-};
+	return <View style={ blockQuoteStyle }>{ newChildren }</View>;
+} );
diff --git a/packages/primitives/src/block-quotation/style.native.scss b/packages/primitives/src/block-quotation/style.native.scss
index 2e88c68cf26fa..76dba07c13247 100644
--- a/packages/primitives/src/block-quotation/style.native.scss
+++ b/packages/primitives/src/block-quotation/style.native.scss
@@ -1,11 +1,20 @@
-.wpBlockQuote {
+%wpBlockQuote-shared {
 	border-left-width: 4px;
-	border-left-color: $black;
 	border-left-style: solid;
 	padding-left: 8px;
 	margin-left: 0;
 }
 
+.wpBlockQuoteLight {
+	@extend %wpBlockQuote-shared;
+	border-left-color: $black;
+}
+
+.wpBlockQuoteDark {
+	@extend %wpBlockQuote-shared;
+	border-left-color: $white;
+}
+
 .wpBlockQuoteCitation {
 	margin-top: 16px;
 	font-size: 14px;