Merge pull request #2736 from Automattic/add/customizer-darkmode-notice

Spearhead: adds customizer notice about dark mode.

seedlet/inc/wpcom-customize-message.css

@@ -5,17 +5,19 @@
  * targeting the updates needed to hide the page title on the homepage on WordPress.com.
  */
 
+#customize-control-color_darkmode_notice,
 #customize-control-color_a11y_warning {
 	background: #FFF;
 	border: 1px solid #ccd0d4;
 	border-left: 4px solid #00a0d2;
 	box-shadow: 0 1px 1px rgba( 0, 0, 0, .04 );
-	margin: 0 0 6px 0;
+	margin: 0 0 12px 0;
 	padding: 9px 14px;
 	overflow: hidden;
 	width: auto;
 }
 
+#customize-control-color_darkmode_notice .customize-control-title,
 #customize-control-color_a11y_warning .customize-control-title {
 	display: none;
 }

spearhead/inc/wpcom-colors.php

@@ -2,10 +2,49 @@
 
 require_once get_template_directory() . '/inc/wpcom-colors-utils.php';
 
-seedlet_define_color_annotations( [
-	'background' => '#FFFFFF',
-	'foreground' => '#000000',
-	'primary' => '#DB0042',
-	'secondary' => '#555555',
-	'tertiary' => '#FAFBF6',
-] );
+seedlet_define_color_annotations(
+	array(
+		'background' => '#FFFFFF',
+		'foreground' => '#000000',
+		'primary'    => '#DB0042',
+		'secondary'  => '#555555',
+		'tertiary'   => '#FAFBF6',
+	)
+);
+
+/**
+ * Add a customizer message about dark mode.
+ */
+if ( ! function_exists( 'spearhead_wpcom_customize_update' ) ) :
+	function spearhead_wpcom_customize_update( $wp_customize ) {
+		$wpcom_colors_array = get_theme_mod( 'colors_manager' );
+
+		$default_palette = array(
+			'bg'   => '#ffffff',
+			'txt'  => '#000000',
+			'link' => '#db0042',
+			'fg1'  => '#555555',
+			'fg2'  => '#fafbf6',
+		);
+
+		if ( $default_palette === $wpcom_colors_array['colors'] ) :
+			$wp_customize->add_setting( 'color_darkmode_notice' );
+			$wp_customize->add_control(
+				'color_darkmode_notice',
+				array(
+					'id'          => 'darkmode_notice',
+					'label'       => esc_html__( 'Dark Mode', 'spearhead' ),
+					'description' => sprintf(
+						/* translators: %s: link to how to support system display modes */
+						__( "This theme's default palette will display a dark color palette automatically for users who have dark mode enabled on their devices. <a href='%s' target='_blank'>Learn more about dark mode</a>.", 'spearhead' ),
+						esc_url( 'https://www.a11yproject.com/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/' )
+					),
+					'section'     => 'colors_manager_tool',
+					'priority'    => 10, // Set to 10 so it appears near the top of the Colors & Backgrounds panel
+					'type'        => 'hidden',
+				)
+			);
+		endif;
+	}
+	add_action( 'customize_register', 'spearhead_wpcom_customize_update' );
+endif;