diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js
index f0845e6b74f8ad..3e1bca650976a2 100644
--- a/packages/block-editor/src/components/block-icon/index.native.js
+++ b/packages/block-editor/src/components/block-icon/index.native.js
@@ -8,15 +8,33 @@ import { View } from 'react-native';
*/
import { Icon } from '@wordpress/components';
import { blockDefault } from '@wordpress/icons';
+import { withPreferredColorScheme } from '@wordpress/compose';
-export default function BlockIcon( { icon, showColors = false } ) {
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export function BlockIcon( {
+ icon,
+ showColors = false,
+ getStylesFromColorScheme,
+} ) {
if ( icon?.src === 'block-default' ) {
icon = {
src: blockDefault,
};
}
- const renderedIcon = ;
+ const renderedIcon = (
+
+ );
const style = showColors
? {
backgroundColor: icon && icon.background,
@@ -26,3 +44,5 @@ export default function BlockIcon( { icon, showColors = false } ) {
return { renderedIcon };
}
+
+export default withPreferredColorScheme( BlockIcon );
diff --git a/packages/block-editor/src/components/block-icon/style.native.scss b/packages/block-editor/src/components/block-icon/style.native.scss
new file mode 100644
index 00000000000000..605312709ef5c9
--- /dev/null
+++ b/packages/block-editor/src/components/block-icon/style.native.scss
@@ -0,0 +1,7 @@
+.iconPlaceholder {
+ fill: $gray-dark;
+}
+
+.iconPlaceholderDark {
+ fill: $white;
+}
diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
index f0dac0e0ff6326..22cdf58c5fb694 100644
--- a/packages/block-library/src/file/edit.native.js
+++ b/packages/block-library/src/file/edit.native.js
@@ -27,13 +27,14 @@ import {
import { file as icon, replace, button, external } from '@wordpress/icons';
import { Component } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './style.scss';
-export default class FileEdit extends Component {
+export class FileEdit extends Component {
constructor( props ) {
super( props );
@@ -108,7 +109,7 @@ export default class FileEdit extends Component {
this.setState( { isUrlCopied: true } );
this.timerRef = setTimeout( () => {
this.setState( { isUrlCopied: false } );
- }, 1000 );
+ }, 1500 );
}
onChangeOpenInNewWindow( newValue ) {
@@ -172,6 +173,11 @@ export default class FileEdit extends Component {
}
getInspectorControls( { showDownloadButton, textLinkTarget } ) {
+ const actionButtonStyle = this.props.getStylesFromColorScheme(
+ styles.actionButton,
+ styles.actionButtonDark
+ );
+
return (
@@ -194,6 +200,9 @@ export default class FileEdit extends Component {
? __( 'Copied!' )
: __( 'Copy file URL' )
}
+ labelStyle={
+ this.state.isUrlCopied || actionButtonStyle
+ }
onPress={ this.onCopyURL }
/>
@@ -335,3 +344,5 @@ export default class FileEdit extends Component {
);
}
}
+
+export default withPreferredColorScheme( FileEdit );
diff --git a/packages/block-library/src/file/style.native.scss b/packages/block-library/src/file/style.native.scss
index a4f6eb12fc52a1..2cdf1fbc8eff38 100644
--- a/packages/block-library/src/file/style.native.scss
+++ b/packages/block-library/src/file/style.native.scss
@@ -26,3 +26,11 @@
flex: 1;
background-color: "rgba(0, 0, 0, 0.5)";
}
+
+.actionButton {
+ color: $blue-50;
+}
+
+.actionButtonDark {
+ color: $blue-30;
+}