[WIP] Feature/1912 theme detection

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">

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">

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">

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 %}

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 %}

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">

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;

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();
 });