T345056: dark mode support

src/init.js

@@ -1,6 +1,17 @@
 /* global wikipediapreview_init_options */
-wikipediaPreview.init( {
-	root: document,
-	/* eslint-disable-next-line camelcase */
-	detectLinks: !! wikipediapreview_init_options.detectLinks,
-} );
+import { getColorScheme, observeDarkModePluginActivation } from './link/colorScheme';
+
+const init = ( scheme ) => {
+	wikipediaPreview.init( {
+		root: document,
+		/* eslint-disable-next-line camelcase */
+		detectLinks: !! wikipediapreview_init_options.detectLinks,
+		prefersColorScheme: scheme,
+	} );
+};
+
+// Initial init on first page load
+init( getColorScheme() );
+
+// Re-init as needed as the color scheme changes
+observeDarkModePluginActivation( init );

src/link/colorScheme.js

@@ -0,0 +1,30 @@
+const attNameWPDarkModePlugin = 'data-wp-dark-mode-active';
+
+const isWPDarkModePluginActive = () => {
+	return document.documentElement.hasAttribute( attNameWPDarkModePlugin );
+};
+
+export const getColorScheme = () => {
+	if ( isWPDarkModePluginActive() ) {
+		return 'dark';
+	}
+	return 'detect';
+};
+
+export const observeDarkModePluginActivation = ( callback ) => {
+	// eslint-disable-next-line no-undef
+	const observer = new MutationObserver( ( mutationsList ) => {
+		for ( const mutation of mutationsList ) {
+			if ( mutation.type === 'attributes' && mutation.attributeName === attNameWPDarkModePlugin ) {
+				if ( isWPDarkModePluginActive() ) {
+					callback( 'dark' );
+				} else {
+					callback( 'light' );
+				}
+				break;
+			}
+		}
+	} );
+
+	observer.observe( document.documentElement, { attributes: true } );
+};