Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Feature/1912 theme detection #867

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[WIP] Feature/1912 theme detection #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
53b29e0
Setting up example of OS/Browser level theme detection
nicklee Mar 8, 2022
b949ab9
Simplifying
nicklee Mar 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ..._styleguide/templates/patterns/pages/editorial_event_landing/editorial_event_landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion rca/project_styleguide/templates/patterns/pages/enquire_to_study/enquire_form_thanks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion rca/project_styleguide/templates/patterns/pages/forms/form_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion rca/project_styleguide/templates/patterns/pages/forms/thanks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion rca/project_styleguide/templates/patterns/pages/scholarships/scholarship_form_thanks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
41 changes: 41 additions & 0 deletions rca/static_src/javascript/components/detect-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 7 additions & 0 deletions rca/static_src/javascript/main.entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
});