diff --git a/rca/project_styleguide/templates/patterns/pages/editorial_event_landing/editorial_event_landing.html b/rca/project_styleguide/templates/patterns/pages/editorial_event_landing/editorial_event_landing.html
index 9091a765f..a55aef4b6 100644
--- a/rca/project_styleguide/templates/patterns/pages/editorial_event_landing/editorial_event_landing.html
+++ b/rca/project_styleguide/templates/patterns/pages/editorial_event_landing/editorial_event_landing.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <div class="page page--no-hero">
+    <div class="page page--no-hero" data-theme-detect>
 
         <header class="page__header bg bg--dark">
             <div class="title-area title-area--landing-page grid">
diff --git a/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_page.html b/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_page.html
index 4a3b0a804..66f658eb3 100644
--- a/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_page.html
+++ b/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_page.html
@@ -13,7 +13,7 @@
 
 {% block content %}
 
-<div class="page page--no-hero">
+<div class="page page--no-hero" data-theme-detect>
 
     <div class="page__header bg bg--dark">
         <div class="title-area title-area--guide grid">
diff --git a/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_thanks.html b/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_thanks.html
index 4919ae385..4bc71fdd9 100644
--- a/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_thanks.html
+++ b/rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_thanks.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 
-    <div class="page page--no-hero">
+    <div class="page page--no-hero" data-theme-detect>
 
         <div class="page__header bg bg--dark">
             <div class="title-area title-area--guide grid">
diff --git a/rca/project_styleguide/templates/patterns/pages/forms/form_page.html b/rca/project_styleguide/templates/patterns/pages/forms/form_page.html
index 59335b483..06c14b661 100644
--- a/rca/project_styleguide/templates/patterns/pages/forms/form_page.html
+++ b/rca/project_styleguide/templates/patterns/pages/forms/form_page.html
@@ -9,7 +9,7 @@
 
 {% block content %}
 
-<div class="page page--no-hero">
+<div class="page page--no-hero" data-theme-detect>
 
     <div class="page__header bg bg--dark">
         {% if page.title %}
diff --git a/rca/project_styleguide/templates/patterns/pages/forms/thanks.html b/rca/project_styleguide/templates/patterns/pages/forms/thanks.html
index f690184ab..436ba7e59 100644
--- a/rca/project_styleguide/templates/patterns/pages/forms/thanks.html
+++ b/rca/project_styleguide/templates/patterns/pages/forms/thanks.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <div class="page page--no-hero">
+    <div class="page page--no-hero" data-theme-detect>
 
         <div class="page__header bg bg--dark">
             {% if page.title %}
diff --git a/rca/project_styleguide/templates/patterns/pages/scholarships/scholarship_form_thanks.html b/rca/project_styleguide/templates/patterns/pages/scholarships/scholarship_form_thanks.html
index 2d8ea5399..64ba8613e 100644
--- a/rca/project_styleguide/templates/patterns/pages/scholarships/scholarship_form_thanks.html
+++ b/rca/project_styleguide/templates/patterns/pages/scholarships/scholarship_form_thanks.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 
-    <div class="page page--no-hero">
+    <div class="page page--no-hero" data-theme-detect>
 
         <div class="page__header bg bg--dark">
             <div class="title-area title-area--guide grid">
diff --git a/rca/static_src/javascript/components/detect-theme.js b/rca/static_src/javascript/components/detect-theme.js
new file mode 100644
index 000000000..043a0d5af
--- /dev/null
+++ b/rca/static_src/javascript/components/detect-theme.js
@@ -0,0 +1,41 @@
+class DetectTheme {
+    static selector() {
+        return '[data-theme-detect]';
+    }
+
+    constructor(node) {
+        this.container = node;
+        this.detect();
+    }
+
+    detect() {
+        if (
+            window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+            this.setDarkTheme();
+        } else {
+            this.setLightTheme();
+        }
+    }
+
+    setLightTheme() {
+        const elements = document.querySelectorAll('.bg--dark');
+
+        elements.forEach((item) => {
+            item.classList.remove('bg--dark');
+            item.classList.add('bg--light');
+        });
+    }
+
+    setDarkTheme() {
+        const elements = document.querySelectorAll('.bg--light');
+
+        elements.forEach((item) => {
+            item.classList.remove('bg--light');
+            item.classList.add('bg--dark');
+        });
+    }
+}
+
+export default DetectTheme;
diff --git a/rca/static_src/javascript/main.entry.js b/rca/static_src/javascript/main.entry.js
index e9d224301..1ee681508 100755
--- a/rca/static_src/javascript/main.entry.js
+++ b/rca/static_src/javascript/main.entry.js
@@ -24,6 +24,7 @@ import SitewideAlert from './components/sitewide-alert';
 import FormFocus from './components/form-focus';
 import EmailShare from './components/email-share';
 import ScholarshipList from './components/scholarship-list';
+import DetectTheme from './components/detect-theme';
 import './components/sticky-header';
 import './components/lazyload-images';
 import './components/outdated-banner';
@@ -153,6 +154,12 @@ document.addEventListener('DOMContentLoaded', () => {
         new ScholarshipList(scholarshiplist);
     }
 
+    for (const detecttheme of document.querySelectorAll(
+        DetectTheme.selector(),
+    )) {
+        new DetectTheme(detecttheme);
+    }
+
     new ActualHeight();
     Alpine.start();
 });