diff --git a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
index 087e8ca17..6a6628c5a 100644
--- a/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
+++ b/modules/tide_landing_page/config/install/field.field.node.landing_page.field_landing_page_hero_theme.yml
@@ -10,9 +10,9 @@ id: node.landing_page.field_landing_page_hero_theme
 field_name: field_landing_page_hero_theme
 entity_type: node
 bundle: landing_page
-label: Here image theme
+label: Hero image theme
 description: 'If your hero image is mostly dark, apply the dark theme. This changes how the page title is displayed.'
-required: false
+required: true
 translatable: false
 default_value: {  }
 default_value_callback: ''
diff --git a/modules/tide_landing_page/js/hero_image_theme.js b/modules/tide_landing_page/js/hero_image_theme.js
new file mode 100644
index 000000000..f8c7b7b36
--- /dev/null
+++ b/modules/tide_landing_page/js/hero_image_theme.js
@@ -0,0 +1,40 @@
+(function (Drupal) {
+  "use strict";
+
+  Drupal.behaviors.heroImageTheme = {
+    attach: function (context, settings) {
+      const imageTheme = context.querySelector(
+        'select[data-drupal-selector^="edit-field-landing-page-hero-theme"]'
+      );
+
+      if (imageTheme !== null) {
+        setImageTheme();
+
+        const headerStyles = context.querySelectorAll(
+          'input[data-drupal-selector^="edit-header-style-options"]'
+        );
+
+        if (headerStyles.length > 0) {
+          headerStyles.forEach((style) => {
+            style.addEventListener("change", setImageTheme);
+          });
+        }
+      }
+
+      function setImageTheme() {
+        const selectedHeaderStyle = document.querySelector(
+          'input[data-drupal-selector^="edit-header-style-options"]:checked'
+        );
+
+        if (!selectedHeaderStyle) {
+          return; // Exit if no style option is selected.
+        }
+
+        let defaultHeaderStyle = selectedHeaderStyle.value;
+        imageTheme.disabled = defaultHeaderStyle === "corner" ? false : true;
+        imageTheme.value =
+          defaultHeaderStyle === "fullwidth" ? "dark" : "light";
+      }
+    },
+  };
+})(Drupal);
diff --git a/modules/tide_landing_page/tests/behat/features/fields.feature b/modules/tide_landing_page/tests/behat/features/fields.feature
index 53568ea26..542c1b1cb 100644
--- a/modules/tide_landing_page/tests/behat/features/fields.feature
+++ b/modules/tide_landing_page/tests/behat/features/fields.feature
@@ -27,6 +27,7 @@ Feature: Fields for Landing Page content type
     And I should see text matching "Call to action banner"
     And I should see text matching "No Hero Banner with CTA added yet."
     And I should see the button "Add Hero banner with CTA" in the "content" region
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And the "#edit-field-landing-page-hero-logo" element should contain "Logo"
     And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element
@@ -34,6 +35,7 @@ Feature: Fields for Landing Page content type
     And I select the radio button "Corner graphics"
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
@@ -156,6 +158,7 @@ Feature: Fields for Landing Page content type
     And I should see text matching "Call to action banner"
     And I should see text matching "No Hero Banner with CTA added yet."
     And I should see the button "Add Hero banner with CTA" in the "content" region
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And the "#edit-field-landing-page-hero-logo" element should contain "Logo"
     And I should see an "input#edit-field-landing-page-hero-logo-entity-browser-entity-browser-open-modal" element
@@ -163,6 +166,7 @@ Feature: Fields for Landing Page content type
     And I select the radio button "Corner graphics"
     And the "#edit-field-bottom-graphical-image" element should contain "Bottom Corner Graphic"
     And I should see an "input#edit-field-bottom-graphical-image-entity-browser-target" element
+    And I should see a "select#edit-field-landing-page-hero-theme" element
 
     And I click on the horizontal tab "Header extras"
     And I should see text matching "Header components"
@@ -300,3 +304,47 @@ Feature: Fields for Landing Page content type
     # This field can be "seen" but not visible.
     And I see field "field_landing_page_component[0][subform][field_customise][value]"
     And save screenshot
+
+@api @javascript
+  Scenario: Selecting Corner graphics value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-corner" element
+    And I select "corner" from "edit-header-style-options-corner"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
+
+ @api @javascript
+  Scenario: Selecting Default appearance value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-default" element
+    And I select "corner" from "edit-header-style-options-default"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Full-width background image value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-fullwidtht" element
+    And I select "corner" from "edit-header-style-options-fullwidth"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Dark"
+    And save screenshot
+
+@api @javascript
+  Scenario: Selecting Call to action banner value from header style.
+    Given I am logged in as a user with the "editor" role
+    When I visit "node/add/landing_page"
+    And I click on the horizontal tab "Customised Header"
+    Then I should see an "#edit-header-style-options-cta" element
+    And I select "corner" from "edit-header-style-options-cta"
+    Then I should see an "#edit-field-landing-page-hero-theme" element
+    And I should see text matching "Light"
+    And save screenshot
diff --git a/modules/tide_landing_page/tide_landing_page.install b/modules/tide_landing_page/tide_landing_page.install
index de73d8b3d..39e7e8f5f 100644
--- a/modules/tide_landing_page/tide_landing_page.install
+++ b/modules/tide_landing_page/tide_landing_page.install
@@ -203,3 +203,24 @@ function tide_landing_page_update_10107() {
   $tide_update_helper = \Drupal::service('tide_core.entity_update_helper');
   $tide_update_helper->revert('field_config', 'paragraph.key_journeys.field_paragraph_title');
 }
+
+/**
+ * Set field `field_landing_page_hero_theme` to mandatory.
+ */
+function tide_landing_page_update_10108() {
+  $bundles = [
+    'landing_page',
+    'publication',
+    'publication_page',
+  ];
+
+  foreach ($bundles as $bundle) {
+    $field = FieldConfig::loadByName('node', $bundle, 'field_landing_page_hero_theme');
+    if (!empty($field)) {
+      $field->setLabel('Hero image theme');
+      $field->setRequired(TRUE);
+      $field->setDefaultValue('light');
+      $field->save();
+    }
+  }
+}
diff --git a/modules/tide_landing_page/tide_landing_page.libraries.yml b/modules/tide_landing_page/tide_landing_page.libraries.yml
index 9f056fcd9..a0928ca57 100644
--- a/modules/tide_landing_page/tide_landing_page.libraries.yml
+++ b/modules/tide_landing_page/tide_landing_page.libraries.yml
@@ -5,5 +5,6 @@ landing_page_form:
   js:
     js/hide_elements.js: {}
     js/statistics_grid.js: {}
+    js/hero_image_theme.js: {}
   dependencies:
     - core/jquery
diff --git a/modules/tide_landing_page/tide_landing_page.module b/modules/tide_landing_page/tide_landing_page.module
index fe1d0196b..51d91ea7c 100644
--- a/modules/tide_landing_page/tide_landing_page.module
+++ b/modules/tide_landing_page/tide_landing_page.module
@@ -406,6 +406,13 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa
       'cta' => t('Call to action banner'),
     ],
   ];
+  $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['disabled'] = [
+    ':input[name="_header_style_options"]' => [
+      ['value' => 'default'],
+      ['value' => 'fullwidth'],
+      ['value' => 'cta'],
+    ],
+  ];
 
   $form['field_landing_page_hero_image']['#states']['visible'] = [
     ':input[name="_header_style_options"]' => [
@@ -413,6 +420,7 @@ function _tide_landing_page_form_node_form_process(array $form, FormStateInterfa
       ['value' => 'cta'],
     ],
   ];
+
   $form['field_graphical_image']['#states']['visible'] = [
     ':input[name="_header_style_options"]' => ['value' => 'corner'],
   ];
diff --git a/modules/tide_publication/tide_publication.module b/modules/tide_publication/tide_publication.module
index 7dd65b6e5..8f5df3c6a 100644
--- a/modules/tide_publication/tide_publication.module
+++ b/modules/tide_publication/tide_publication.module
@@ -128,13 +128,16 @@ function _tide_publication_form_node_form_process(array $form, FormStateInterfac
     ],
   ];
 
+  $form['field_landing_page_hero_image']['widget']['field_landing_page_hero_theme']['#states']['enabled'] = [
+    ':input[name="_header_style_options"]' => ['value' => 'corner'],
+  ];
+
   $form['field_landing_page_hero_image']['#states']['visible'] = [
     ':input[name="_header_style_options"]' => [
       ['value' => 'fullwidth'],
       ['value' => 'cta'],
     ],
   ];
-
   // Determine the initial value of Header style.
   $node_hero_image_empty = $node->get('field_landing_page_hero_image')->isEmpty();
   $header_style = 'default';