From 78e749dc88b65aa066b58cd67826d97a215eab1d Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 19 Mar 2020 09:10:04 +0100 Subject: [PATCH] [RNMobile] - Implements Dark Mode on Android platform (#19293) --- .../index.android.js | 33 +++++++++++++++++++ .../{index.native.js => index.ios.js} | 0 test/native/setup.js | 1 + 3 files changed, 34 insertions(+) create mode 100644 packages/compose/src/hooks/use-preferred-color-scheme/index.android.js rename packages/compose/src/hooks/use-preferred-color-scheme/{index.native.js => index.ios.js} (100%) diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js new file mode 100644 index 00000000000000..6d81eeca5a0852 --- /dev/null +++ b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { + subscribePreferredColorScheme, + isInitialColorSchemeDark, +} from 'react-native-gutenberg-bridge'; +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; + +/** + * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ] + * + * @return {string} return current color scheme. + */ +const usePreferredColorScheme = function() { + const [ currentColorScheme, setCurrentColorScheme ] = useState( + isInitialColorSchemeDark ? 'dark' : 'light' + ); + useEffect( () => { + subscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => { + const colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light'; + if ( colorScheme !== currentColorScheme ) { + setCurrentColorScheme( colorScheme ); + } + } ); + } ); + return currentColorScheme; +}; + +export default usePreferredColorScheme; diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js similarity index 100% rename from packages/compose/src/hooks/use-preferred-color-scheme/index.native.js rename to packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js diff --git a/test/native/setup.js b/test/native/setup.js index 1a29cb054f9242..8dcf3c00f58dbd 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -13,6 +13,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => { subscribeSetFocusOnTitle: jest.fn(), subscribeUpdateHtml: jest.fn(), subscribeMediaAppend: jest.fn(), + subscribePreferredColorScheme: () => 'light', editorDidMount: jest.fn(), editorDidAutosave: jest.fn(), subscribeMediaUpload: jest.fn(),