From 53b29e046675966a9f98f184dc050d00525910de Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Tue, 8 Mar 2022 12:21:05 +0000 Subject: [PATCH 1/2] Setting up example of OS/Browser level theme detection http://localhost:8000/enquire-to-study/ --- .../editorial_event_landing.html | 2 +- .../enquire_to_study/enquire_form_page.html | 2 +- .../enquire_to_study/enquire_form_thanks.html | 2 +- .../patterns/pages/forms/form_page.html | 2 +- .../patterns/pages/forms/thanks.html | 2 +- .../scholarships/scholarship_form_thanks.html | 2 +- .../javascript/components/detect-theme.js | 36 +++++++++++++++++++ rca/static_src/javascript/main.entry.js | 7 ++++ 8 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 rca/static_src/javascript/components/detect-theme.js 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 %} -
+
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 %} -
+
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 %} -
+
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 %} -
+
{% 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 %} -
+
{% 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 %} -
+
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..1f3ca90f9 --- /dev/null +++ b/rca/static_src/javascript/components/detect-theme.js @@ -0,0 +1,36 @@ +class DetectTheme { + static selector() { + return '[data-theme-detect]'; + } + + constructor(node) { + this.container = node; + this.detect(); + this.bindEvents(); + } + + detect() { + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + this.setDarkTheme(); + } else { + this.setLightTheme(); + } + } + + setLightTheme() { + const a = document.getElementsByClassName('bg--dark'); + [...a].forEach((x) => (x.className += ' bg--light')); + [...a].forEach((x) => x.classList.remove('bg--dark')); + } + + setDarkTheme() { + const a = document.getElementsByClassName('bg--light'); + [...a].forEach((x) => (x.className += ' bg--dark')); + [...a].forEach((x) => x.classList.remove('bg--light')); + } +} + +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(); }); From b949ab94c60913b3a954bdaa5a0a390ac0bfe9fe Mon Sep 17 00:00:00 2001 From: Nick Lee Date: Tue, 8 Mar 2022 12:34:02 +0000 Subject: [PATCH 2/2] Simplifying --- .../javascript/components/detect-theme.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/rca/static_src/javascript/components/detect-theme.js b/rca/static_src/javascript/components/detect-theme.js index 1f3ca90f9..043a0d5af 100644 --- a/rca/static_src/javascript/components/detect-theme.js +++ b/rca/static_src/javascript/components/detect-theme.js @@ -6,7 +6,6 @@ class DetectTheme { constructor(node) { this.container = node; this.detect(); - this.bindEvents(); } detect() { @@ -21,15 +20,21 @@ class DetectTheme { } setLightTheme() { - const a = document.getElementsByClassName('bg--dark'); - [...a].forEach((x) => (x.className += ' bg--light')); - [...a].forEach((x) => x.classList.remove('bg--dark')); + const elements = document.querySelectorAll('.bg--dark'); + + elements.forEach((item) => { + item.classList.remove('bg--dark'); + item.classList.add('bg--light'); + }); } setDarkTheme() { - const a = document.getElementsByClassName('bg--light'); - [...a].forEach((x) => (x.className += ' bg--dark')); - [...a].forEach((x) => x.classList.remove('bg--light')); + const elements = document.querySelectorAll('.bg--light'); + + elements.forEach((item) => { + item.classList.remove('bg--light'); + item.classList.add('bg--dark'); + }); } }