Fix local storage to only store dark mode value if manually overwritten.

WordPress · Mar 20, 2024 · 4a35f3f · 4a35f3f
1 parent 5ccb56a
commit 4a35f3f
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js b/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js
@@ -21,6 +21,7 @@ const { state, actions } = store( 'twentytwentyone', {
         isPrimaryMenuOpen: false,
         prevScroll: 0,
         isDarkMode: false,
+        isDarkModeManuallyOverwritten: false,
         isDarkModeTogglerHidden: false,
     },
     actions: {
@@ -38,6 +39,7 @@ const { state, actions } = store( 'twentytwentyone', {
 
         toggleDarkMode: () => {
             state.isDarkMode = ! state.isDarkMode;
+            state.isDarkModeManuallyOverwritten = true;
         },
 
         trapFocusInModal: ( event ) => {
@@ -159,19 +161,26 @@ const { state, actions } = store( 'twentytwentyone', {
 
         initDarkMode: () => {
             let isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
+            let isDarkModeManuallyOverwritten = false;
 
             const cachedValue = window.localStorage.getItem( 'twentytwentyoneDarkMode' );
             if ( 'yes' === cachedValue ) {
                 isDarkMode = true;
+                isDarkModeManuallyOverwritten = true;
             } else if ( 'no' === cachedValue ) {
                 isDarkMode = false;
+                isDarkModeManuallyOverwritten = true;
             }
 
             state.isDarkMode = isDarkMode;
+            state.isDarkModeManuallyOverwritten = isDarkModeManuallyOverwritten;
         },
 
         storeDarkMode: () => {
-            window.localStorage.setItem( 'twentytwentyoneDarkMode', state.isDarkMode ? 'yes' : 'no' );
+            // Store dark mode preference in local storage only if it was explicitly set via the website toggle.
+            if ( state.isDarkModeManuallyOverwritten ) {
+                window.localStorage.setItem( 'twentytwentyoneDarkMode', state.isDarkMode ? 'yes' : 'no' );
+            }
         },
 
         refreshHtmlElementDarkMode: () => {