Merge pull request #2541 from Automattic/add/spearhead-dark-mode

Add dark mode to spearhead

seedlet/assets/css/ie-editor.css

@@ -343,6 +343,22 @@ div[data-type="core/button"] {
 	display: block;
 }
 
+/**
+ * Calendar
+ */
+.wp-block-calendar table th {
+	background-color: #333333;
+	color: #FFFFFF;
+}
+
+.wp-block-calendar table tbody {
+	color: #333333;
+}
+
+.wp-block-calendar table caption {
+	color: #333333;
+}
+
 .wp-block-cover {
 	background-color: #000000;
 	min-height: 450px;

seedlet/assets/css/ie.css

@@ -2095,6 +2095,22 @@ object {
 	border-radius: 0;
 }
 
+/**
+ * Calendar
+ */
+.wp-block-calendar table th {
+	background-color: #333333;
+	color: #FFFFFF;
+}
+
+.wp-block-calendar table tbody {
+	color: #333333;
+}
+
+.wp-block-calendar table caption {
+	color: #333333;
+}
+
 .wp-block-code {
 	color: #333333;
 	font-size: 16px;

seedlet/assets/css/style-editor.css

@@ -469,6 +469,18 @@ div[data-type="core/button"] {
 	display: block;
 }
 
+/**
+ * Calendar
+ */
+.wp-block-calendar table th {
+	background-color: var(--global--color-foreground);
+	color: var(--global--color-background);
+}
+
+.wp-block-calendar table tbody, .wp-block-calendar table caption {
+	color: var(--global--color-foreground);
+}
+
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: var(--cover--color-foreground);

seedlet/assets/sass/blocks/_editor.scss

@@ -5,6 +5,7 @@
 //   files and conditionally loaded
 
 @import "button/editor";
+@import "calendar/style";
 @import "code/editor";
 @import "cover/editor";
 @import "file/editor";

seedlet/assets/sass/blocks/_style.scss

@@ -6,6 +6,7 @@
 
 @import "audio/style";
 @import "button/style";
+@import "calendar/style";
 @import "code/style";
 @import "columns/style";
 @import "cover/style";

seedlet/assets/sass/blocks/calendar/_style.scss

@@ -0,0 +1,10 @@
+/**
+ * Calendar
+ */
+ .wp-block-calendar table th {
+	background-color: var(--global--color-foreground);
+	color: var(--global--color-background);
+}
+.wp-block-calendar table tbody, .wp-block-calendar table caption  {
+	color: var(--global--color-foreground);
+}

seedlet/style-rtl.css

@@ -1320,6 +1320,18 @@ object {
 	border-radius: 0;
 }
 
+/**
+ * Calendar
+ */
+.wp-block-calendar table th {
+	background-color: var(--global--color-foreground);
+	color: var(--global--color-background);
+}
+
+.wp-block-calendar table tbody, .wp-block-calendar table caption {
+	color: var(--global--color-foreground);
+}
+
 .wp-block-code {
 	color: var(--global--color-foreground);
 	font-size: var(--global--font-size-sm);

seedlet/style.css

@@ -1328,6 +1328,18 @@ object {
 	border-radius: 0;
 }
 
+/**
+ * Calendar
+ */
+.wp-block-calendar table th {
+	background-color: var(--global--color-foreground);
+	color: var(--global--color-background);
+}
+
+.wp-block-calendar table tbody, .wp-block-calendar table caption {
+	color: var(--global--color-foreground);
+}
+
 .wp-block-code {
 	color: var(--global--color-foreground);
 	font-size: var(--global--font-size-sm);

spearhead/functions.php

@@ -20,7 +20,8 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
 	function spearhead_setup() {
 
 		// Add support for editor styles.
-        add_theme_support( 'editor-styles' );
+		add_theme_support( 'editor-styles' );
+		add_theme_support( 'dark-editor-style' );
 
 		// Enqueue editor styles.
 		add_editor_style( array(
@@ -130,7 +131,7 @@ function spearhead_block_extends() {
 	// Block Tweaks
 	wp_enqueue_script( 'spearhead-block-extends',
 		get_stylesheet_directory_uri() . '/assets/js/extend-blocks.js',
-		array( 'wp-blocks', 'wp-edit-post' ) // wp-edit-post is added to avoid a race condition when trying to unregister a style variation 
+		array( 'wp-blocks', 'wp-edit-post' ) // wp-edit-post is added to avoid a race condition when trying to unregister a style variation
 	);
 }
 add_action( 'enqueue_block_assets', 'spearhead_block_extends' );
@@ -150,7 +151,7 @@ function spearhead_fonts_url() : string {
 
     // Make a single request for the theme fonts.
     $fonts_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families );
-    
+
     return $fonts_url;
 }
 
@@ -164,4 +165,4 @@ function seedlet_entry_meta_header() : void {
 		seedlet_posted_on();
 	}
 }
-// require get_stylesheet_directory() . '/inc/custom-header.php';
+// require get_stylesheet_directory() . '/inc/custom-header.php';

spearhead/style-rtl.css

@@ -167,4 +167,4 @@ a {
 
 .wp-block-latest-posts > li > a:hover {
 	color: var(--global--color-primary);
-}
+}

spearhead/style.css

@@ -168,3 +168,5 @@ a {
 .wp-block-latest-posts > li > a:hover {
 	color: var(--global--color-primary);
 }
+
+/*# sourceMappingURL=style.css.map */

spearhead/variables.css

@@ -72,3 +72,16 @@
 
 	--list--font-family: var(--global--font-secondary);
 }
+
+@media ( prefers-color-scheme: dark ) {
+	:root {
+		--global--color-primary: #DB0042;
+		--global--color-primary-hover: #DB0042;
+		--global--color-secondary: #c0c0c0;
+		--global--color-secondary-hover: #cccccc;
+		--global--color-foreground: #f0f0f0;
+		--global--color-foreground-light: #ffffff;
+		--global--color-background: #333333;
+		--global--color-text-selection: #000000;
+	}
+}