T345056: dark mode support

src/init.js

@@ -1,6 +1,10 @@
 /* global wikipediapreview_init_options */
+import { getColorScheme } from './link/utils';
+
 wikipediaPreview.init( {
 	root: document,
-	/* eslint-disable-next-line camelcase */
+	/* eslint-disable camelcase */
 	detectLinks: !! wikipediapreview_init_options.detectLinks,
+	prefersColorScheme: getColorScheme( !! wikipediapreview_init_options.darkmode ),
+	/* eslint-enable camelcase */
 } );

src/link/utils.js

@@ -11,3 +11,15 @@ export const isTextNearTheEdge = ( anchor ) => {
 		( scrollWidth - anchorXPosition.right ) / scrollWidth < 0.2
 	);
 };
+
+export const getColorScheme = ( userSetPostMeta ) => {
+	// TODO: add extra check for document.body.style background color?
+	if (
+		window.matchMedia( '(prefers-color-scheme: dark)' ).matches ||
+		userSetPostMeta
+	) {
+		return 'dark';
+	}
+
+	return 'detect';
+};

src/postmeta/wp-postmeta-detectlinks.js

@@ -27,6 +27,18 @@ const WikipediaPreviewPostMetaDetectLinks = ( { postMeta, setPostMeta } ) => {
 					checked={ postMeta.wikipediapreview_detectlinks }
 				/>
 			</PanelRow>
+			<PanelRow>
+				<ToggleControl
+					label={ __(
+						'Enable dark mode',
+						'wikipedia-preview'
+					) }
+					onChange={ ( value ) =>
+						setPostMeta( { wikipediapreview_darkmode: value } )
+					}
+					checked={ postMeta.wikipediapreview_darkmode }
+				/>
+			</PanelRow>
 		</PluginDocumentSettingPanel>
 	);
 };

wikipediapreview.php

@@ -64,6 +64,7 @@ function wikipediapreview_enqueue_scripts() {
 	if ( isset( $post->ID ) ) {
 		$options = array(
 			'detectLinks' => get_post_meta( $post->ID, 'wikipediapreview_detectlinks', true ),
+			'darkmode' => get_post_meta( $post->ID, 'wikipediapreview_darkmode', true ),
 		);
 		wp_localize_script( 'wikipedia-preview-init', 'wikipediapreview_init_options', $options );
 	}
@@ -141,6 +142,19 @@ function register_detectlinks_postmeta() {
 	register_post_meta( $all_post_types, $meta_name, $options );
 }
 
+function register_darkmode_postmeta() {
+	$all_post_types = '';
+	$meta_name      = 'wikipediapreview_darkmode';
+	$options        = array(
+		'show_in_rest'  => true,
+		'auth_callback' => true,
+		'single'        => true,
+		'type'          => 'boolean',
+		'default'       => true, // it could default to false when the gutenburg support is released
+	);
+	register_post_meta( $all_post_types, $meta_name, $options );
+}
+
 function make_link( $text, $url ) {
 	return '<a target="_BLANK" href="' . esc_url( $url ) . '">' . $text . '</a>';
 }
@@ -165,6 +179,7 @@ function add_meta_links( $links_array, $plugin_file_name, $plugin_data, $status
 add_action( 'enqueue_block_editor_assets', 'wikipediapreview_guten_enqueue' );
 add_action( 'init', 'myguten_set_script_translations' );
 add_action( 'init', 'register_detectlinks_postmeta' );
+add_action( 'init', 'register_darkmode_postmeta' );
 
 require __DIR__ . '/banner.php';
 require __DIR__ . '/intro.php';