From 5f346b7d2a7704a667fd60ef891a70836acd79a1 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie.roberto1@nhs.net>
Date: Fri, 28 Aug 2026 11:43:22 +0100
Subject: [PATCH] Set the native page background colour

---
 app/assets/sass/main.scss        | 1 +
 app/assets/sass/native-page.scss | 6 ++++++
 app/views/layout.html            | 4 ++++
 3 files changed, 11 insertions(+)
 create mode 100644 app/assets/sass/native-page.scss

diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
index 6f220dd..487beff 100755
--- a/app/assets/sass/main.scss
+++ b/app/assets/sass/main.scss
@@ -7,5 +7,6 @@ $nhsuk-assets-path: "/nhsuk-frontend/assets/";
 // Add styles for components which mock the native app
 @import "native-header";
 @import "native-bottom-navigation";
+@import "native-page";
 
 // Add your custom CSS/Sass styles below.
diff --git a/app/assets/sass/native-page.scss b/app/assets/sass/native-page.scss
new file mode 100644
index 0000000..4b44722
--- /dev/null
+++ b/app/assets/sass/native-page.scss
@@ -0,0 +1,6 @@
+// The native app doesn't use the a darker grey footer
+// so set the background colour for the HTML to
+// match the page colour instead.
+.app-native__html {
+  background-color: $nhsuk-body-background-colour;
+}
diff --git a/app/views/layout.html b/app/views/layout.html
index b5021c0..3c1e254 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -16,6 +16,10 @@
 {% from "nhsapp/components/tag/macro.njk" import nhsappTag %}
 {% from "nhsapp/components/timeline/macro.njk" import nhsappTimeline %}
 
+{% if data.web !== 'yes' %}
+  {% set htmlClasses = "app-native__html" %}
+{% endif %}
+
 {% block pageTitle -%}
   {%- if errors === true or (errors | length) %}Error: {% endif -%}
   {%- if pageName %}{{ pageName }} – {% endif -%}