Add customizer options for header background color

includes/functions/_customizer-settings.php

@@ -1285,6 +1285,54 @@ function fictioneer_add_header_customizer_settings( $manager ) {
     )
   );
 
+  // Header light color
+  $manager->add_setting(
+    'header_color_light',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'sanitize_hex_color',
+      'default' => ''
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'header_color_light',
+      array(
+        'label' => __( 'Header Color - Light Mode', 'fictioneer' ),
+        'description' => __( 'Used in light mode if no header image has been selected. Default none.', 'fictioneer' ),
+        'section' => 'header_image',
+        'settings' => 'header_color_light',
+        'priority' => 30
+      )
+    )
+  );
+
+  // Header dark color
+  $manager->add_setting(
+    'header_color_dark',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'sanitize_hex_color',
+      'default' => ''
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'header_color_dark',
+      array(
+        'label' => __( 'Header Color - Dark Mode', 'fictioneer' ),
+        'description' => __( 'Used in dark mode if no header image has been selected. Default none.', 'fictioneer' ),
+        'section' => 'header_image',
+        'settings' => 'header_color_dark',
+        'priority' => 31
+      )
+    )
+  );
+
   // Clamp minimum for header image height
   $manager->add_setting(
     'header_image_height_min',
@@ -1299,7 +1347,7 @@ function fictioneer_add_header_customizer_settings( $manager ) {
     'header_image_height_min',
     array(
       'type' => 'number',
-      'priority' => 25,
+      'priority' => 40,
       'section' => 'header_image',
       'label' => __( 'Minimum Height', 'fictioneer' ),
       'description' => __( 'Min. height in pixels of the header image on 320px viewports. Default 210.', 'fictioneer' ),
@@ -1325,7 +1373,7 @@ function fictioneer_add_header_customizer_settings( $manager ) {
     'header_image_height_max',
     array(
       'type' => 'number',
-      'priority' => 26,
+      'priority' => 50,
       'section' => 'header_image',
       'label' => __( 'Maximum Height', 'fictioneer' ),
       'description' => __( 'Max. height in pixels of the header image on [site-width] viewports. Default 480.', 'fictioneer' ),

includes/functions/_customizer.php

@@ -649,6 +649,8 @@ function fictioneer_build_customize_css( $context = null ) {
   $tagline_max = (int) get_theme_mod( 'site_tagline_font_size_max', 18 );
   $header_image_min = (int) get_theme_mod( 'header_image_height_min', 210 );
   $header_image_max = (int) get_theme_mod( 'header_image_height_max', 480 );
+  $header_bg_color_light = fictioneer_get_theme_color( 'header_color_light', '' );
+  $header_bg_color_dark = fictioneer_get_theme_color( 'header_color_dark', '' );
   $header_min = (int) get_theme_mod( 'header_height_min', 190 );
   $header_max = (int) get_theme_mod( 'header_height_max', 380 );
   $story_cover_width_offset = (int) get_theme_mod( 'story_cover_width_offset', 0 );
@@ -805,6 +807,12 @@ function fictioneer_build_customize_css( $context = null ) {
     --site-title-tagline-color: " . fictioneer_hsl_font_code( fictioneer_get_theme_color( 'dark_header_tagline_color' ) ) . ";
   }";
 
+  if ( $header_bg_color_dark ) {
+    $css .= ":root {
+      --header-background-color: " . fictioneer_hsl_code( $header_bg_color_dark ) . ";
+    }";
+  }
+
   if ( get_theme_mod( 'use_custom_dark_mode', false ) ) {
     $css .= ":root, :root[data-theme=base] {"
       .
@@ -855,6 +863,12 @@ function fictioneer_build_customize_css( $context = null ) {
     --site-title-tagline-color: " . fictioneer_hsl_font_code( fictioneer_get_theme_color( 'light_header_tagline_color' ) ) . ";
   }";
 
+  if ( $header_bg_color_light ) {
+    $css .= ":root[data-mode=light] {
+      --header-background-color: " . fictioneer_hsl_code( $header_bg_color_light ) . ";
+    }";
+  }
+
   if ( get_theme_mod( 'use_custom_light_mode', false ) ) {
     $css .= ":root[data-mode=light] {"
       .

includes/functions/hooks/_general_hooks.php

@@ -493,11 +493,12 @@ add_action( 'fictioneer_site', 'fictioneer_post_content_header', 20 );
 
 function fictioneer_inner_header_background( $args ) {
   // Abort if...
-  if ( ! ( $args['header_image_url'] ?? 0 ) || ( $args['header_args']['no_header'] ?? 0 ) ) {
+  if ( ( $args['header_args']['no_header'] ?? 0 ) ) {
     return;
   }
 
   // Setup
+  $header_image_url = $args['header_image_url'] ?? 0;
   $header_image_style = get_theme_mod( 'header_image_style', 'default' );
   $extra_classes = array(
     "_style-{$header_image_style}",
@@ -517,10 +518,16 @@ function fictioneer_inner_header_background( $args ) {
     $extra_classes[] = '_' . $args['post_type'];
   }
 
+  if ( ! $header_image_url ) {
+    $extra_classes[] = '_no-image';
+  }
+
   // Start HTML ---> ?>
   <div class="header-background hide-on-fullscreen polygon <?php echo implode( ' ', $extra_classes ); ?>">
     <div class="header-background__wrapper polygon">
-      <img src="<?php echo $args['header_image_url']; ?>" alt="Header Background Image" class="header-background__image">
+      <?php if ( $header_image_url) : ?>
+        <img src="<?php echo $header_image_url; ?>" alt="Header Background Image" class="header-background__image">
+      <?php endif; ?>
     </div>
   </div>
   <?php // <--- End HTML

src/scss/_header.scss

@@ -70,6 +70,10 @@
   backface-visibility: hidden;
   contain: content; // Improve performance
 
+  &._no-image .header-background__wrapper {
+    background: var(--header-background-color, transparent);
+  }
+
   &._shadow {
     filter: var(--header-image-drop-shadow);
   }