diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index ea4fd1f1e33..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.addListener((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.addListener((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 3bcf5bbe79e..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.addListener((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) {
@@ -99,7 +99,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() {
diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md
index ea4fd1f1e33..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.addListener((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.addListener((e) => checkToggle(e.matches));
+prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
 
 // Called when the app loads
 function loadApp() {