From 822aa6cff5e15d5d191e353008fa7a8f629a9914 Mon Sep 17 00:00:00 2001 From: Stephan Schmitz Date: Tue, 4 May 2021 14:05:06 +0200 Subject: [PATCH 1/3] Replace deprecated API usage in dark mode documentation This change updates the proposed use of the [deprecated `MediaQueryList.addListener()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) method with the standard `MediaQueryList.addEventListener()` method. --- src/pages/theming/dark-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/theming/dark-mode.md b/src/pages/theming/dark-mode.md index 527d1f2af9a..90dea495a32 100644 --- a/src/pages/theming/dark-mode.md +++ b/src/pages/theming/dark-mode.md @@ -100,7 +100,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { From 90358e3d937759373c8f54ad214d4170269d5cd2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 16 May 2023 17:09:28 -0700 Subject: [PATCH 2/3] docs(dark-mode): switch to addEventListener --- docs/theming/dark-mode.md | 4 ++-- versioned_docs/version-v5/theming/dark-mode.md | 2 +- versioned_docs/version-v6/theming/dark-mode.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index ea4fd1f1e33..c20909e707c 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener((e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md index 94500d0ffa7..9a1d4ced69e 100644 --- a/versioned_docs/version-v5/theming/dark-mode.md +++ b/versioned_docs/version-v5/theming/dark-mode.md @@ -67,7 +67,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md index ea4fd1f1e33..c20909e707c 100644 --- a/versioned_docs/version-v6/theming/dark-mode.md +++ b/versioned_docs/version-v6/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener((e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { From 220a2b6f0ad1081e69fad35c50cc4b09fe124dfb Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 16 May 2023 17:14:01 -0700 Subject: [PATCH 3/3] fix(dark-mode): add listener type --- docs/theming/dark-mode.md | 4 ++-- versioned_docs/version-v5/theming/dark-mode.md | 2 +- versioned_docs/version-v6/theming/dark-mode.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index c20909e707c..8d42d01a0ea 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addEventListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md index 9a1d4ced69e..1aee84ed326 100644 --- a/versioned_docs/version-v5/theming/dark-mode.md +++ b/versioned_docs/version-v5/theming/dark-mode.md @@ -67,7 +67,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md index c20909e707c..8d42d01a0ea 100644 --- a/versioned_docs/version-v6/theming/dark-mode.md +++ b/versioned_docs/version-v6/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addEventListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addEventListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() {