Merge pull request #3244 from Automattic/enhance/3213-spearhead-toggle-dark-enabled

Enhance/3213 spearhead toggle dark enabled

spearhead/assets/sass/_author-bio.scss

@@ -14,9 +14,5 @@
 		width: 14px;
 		height: 14px;
 		transform: rotate(-90deg);
-
-		@media ( prefers-color-scheme: dark ) {
-			background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
-		}
 	}
 }

spearhead/assets/sass/_search.scss

@@ -53,13 +53,3 @@
         @extend .screen-reader-text;
     }
 }
-
-@media ( prefers-color-scheme: dark ) {
-    .search-form {
-        & > label {
-            &:before {
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
-            }
-        }
-    }
-}

spearhead/assets/sass/_woocommerce.scss

@@ -13,11 +13,6 @@ body[class*="woocommerce"] #page {
 			min-width: 0;
 			min-height: 0;
 			padding: 1em;
-
-			@media ( prefers-color-scheme: dark ) {
-				background-color: var(--global--color-foreground);
-				border: 1px solid var(--global--color-background);
-			}
 		}
 	}
 

spearhead/assets/sass/style.scss

@@ -7,7 +7,7 @@ Description: Share your podcast with the world using Spearhead.
 Requires at least: 5.5
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.2.6
+Version: 1.3.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet

spearhead/functions.php

@@ -122,6 +122,11 @@ function spearhead_scripts() {
 	// Child theme variables
 	wp_dequeue_style( 'seedlet-custom-color-overrides' );
 	wp_enqueue_style( 'spearhead-variables-style', get_stylesheet_directory_uri() . '/variables.css', array(), wp_get_theme()->get( 'Version' ) );
+
+	if( false === get_theme_mod( 'color_darkmode_disable', false ) ) {
+		wp_enqueue_style( 'spearhead-variables-dark-style', get_stylesheet_directory_uri() . '/variables-dark.css', array(), wp_get_theme()->get( 'Version' ) );
+	}
+
 	wp_enqueue_style( 'seedlet-custom-color-overrides' );
 
 	// enqueue child styles

spearhead/inc/wpcom-colors.php

@@ -28,20 +28,20 @@ if ( ! function_exists( 'spearhead_wpcom_customize_update' ) ) :
 		);
 
 		if ( $default_palette === $wpcom_colors_array['colors'] ) :
-			$wp_customize->add_setting( 'color_darkmode_notice' );
+			$wp_customize->add_setting( 'color_darkmode_disable' );
 			$wp_customize->add_control(
-				'color_darkmode_notice',
+				'color_darkmode_disable',
 				array(
-					'id'          => 'darkmode_notice',
-					'label'       => esc_html__( 'Dark Mode', 'spearhead' ),
+					'label'       => esc_html__( 'Disable 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' ),
+						__( "Unless checked, 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',
+					'type'        => 'checkbox',
+					'settings'	  => 'color_darkmode_disable'
 				)
 			);
 		endif;

spearhead/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spearhead",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "a podcast theme",
   "keywords": [
     "gutenberg",

spearhead/style-rtl.css

@@ -7,7 +7,7 @@ Description: Share your podcast with the world using Spearhead.
 Requires at least: 5.5
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.2.6
+Version: 1.3.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
@@ -36,12 +36,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	transform: rotate(90deg);
 }
 
-@media (prefers-color-scheme: dark) {
-	.author-link:after {
-		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
-	}
-}
-
 /**
  * Required Variables
  */
@@ -879,12 +873,6 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
 	color: var(--entry-header--color);
 }
 
-@media (prefers-color-scheme: dark) {
-	.search-form > label:before {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
-	}
-}
-
 .site-main > article > .entry-footer {
 	margin-top: calc( var(--global--spacing-vertical) / 2);
 	padding-top: 0;
@@ -910,13 +898,6 @@ body[class*="woocommerce"] #page span.onsale {
 	padding: 1em;
 }
 
-@media (prefers-color-scheme: dark) {
-	body[class*="woocommerce"] #page span.onsale {
-		background-color: var(--global--color-foreground);
-		border: 1px solid var(--global--color-background);
-	}
-}
-
 body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
 	max-width: 100%;
 }

spearhead/style.css

@@ -7,7 +7,7 @@ Description: Share your podcast with the world using Spearhead.
 Requires at least: 5.5
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.2.6
+Version: 1.3.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
@@ -36,12 +36,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	transform: rotate(-90deg);
 }
 
-@media (prefers-color-scheme: dark) {
-	.author-link:after {
-		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
-	}
-}
-
 /**
  * Required Variables
  */
@@ -879,12 +873,6 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
 	color: var(--entry-header--color);
 }
 
-@media (prefers-color-scheme: dark) {
-	.search-form > label:before {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
-	}
-}
-
 .site-main > article > .entry-footer {
 	margin-top: calc( var(--global--spacing-vertical) / 2);
 	padding-top: 0;
@@ -910,13 +898,6 @@ body[class*="woocommerce"] #page span.onsale {
 	padding: 1em;
 }
 
-@media (prefers-color-scheme: dark) {
-	body[class*="woocommerce"] #page span.onsale {
-		background-color: var(--global--color-foreground);
-		border: 1px solid var(--global--color-background);
-	}
-}
-
 body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
 	max-width: 100%;
 }

spearhead/variables-dark.css

@@ -0,0 +1,33 @@
+
+
+@media ( prefers-color-scheme: dark ) {
+
+	:root {
+		--global--color-primary: #ff6a81;
+		--global--color-primary-hover: #ffffff;
+		--global--color-secondary: #b2b2b2;
+		--global--color-secondary-hover: #cccccc;
+		--global--color-foreground: #ffffff;
+		--global--color-foreground-low-contrast: #b2b2b2;
+		--global--color-background: #1e1f21;
+		--global--color-background-high-contrast: #2d3139;
+		--global--color-text-selection: #000000;
+		--sticky-posts--color-background: var(--global--color-background);
+		--sticky-posts--alt-color-background: var(--global--color-background-high-contrast);
+		--primary-nav--color-background: var(--global--color-background-high-contrast);
+		--primary-nav--dropdown-color-link: var(--global--color-foreground);
+	}
+
+	.author-link:after {
+		background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
+	}
+
+	.search-form > label:before {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
+	}
+
+	body[class*="woocommerce"] #page span.onsale {
+		background-color: var(--global--color-foreground);
+		border: 1px solid var(--global--color-background);
+	}
+}

spearhead/variables.css

@@ -102,21 +102,3 @@
 	--form--color-text: var(--global--color-secondary);
 
 }
-
-@media ( prefers-color-scheme: dark ) {
-	:root {
-		--global--color-primary: #ff6a81;
-		--global--color-primary-hover: #ffffff;
-		--global--color-secondary: #b2b2b2;
-		--global--color-secondary-hover: #cccccc;
-		--global--color-foreground: #ffffff;
-		--global--color-foreground-low-contrast: #b2b2b2;
-		--global--color-background: #1e1f21;
-		--global--color-background-high-contrast: #2d3139;
-		--global--color-text-selection: #000000;
-		--sticky-posts--color-background: var(--global--color-background);
-		--sticky-posts--alt-color-background: var(--global--color-background-high-contrast);
-		--primary-nav--color-background: var(--global--color-background-high-contrast);
-		--primary-nav--dropdown-color-link: var(--global--color-foreground);
-	}
-}