Display dark mode notice when default palette is active.

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

@@ -12,28 +12,39 @@ seedlet_define_color_annotations(
 	)
 );
 
-
 /**
  * Add a customizer message about dark mode.
  */
 if ( ! function_exists( 'spearhead_wpcom_customize_update' ) ) :
 	function spearhead_wpcom_customize_update( $wp_customize ) {
-		$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 mode automatically for users who have dark mode enabled on their devices. The preview here is only showing the light mode. <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',
-			)
+		$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;