feat: sync theme and font between tabs

ankitskvmdam · Jun 8, 2023 · 3324395 · 3324395
1 parent 42cb96a
commit 3324395
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/static/scripts/core.js b/static/scripts/core.js
@@ -16,7 +16,7 @@ function getTheme() {
     return body.getAttribute('data-theme');
 }
 
-function updateTheme(theme) {
+function localUpdateTheme(theme) {
     var body = document.body;
     var svgUse = document.querySelectorAll('.theme-svg-use');
     var iconID = theme === 'dark' ? '#light-theme-icon' : '#dark-theme-icon';
@@ -28,7 +28,10 @@ function updateTheme(theme) {
     svgUse.forEach(function (svg) {
         svg.setAttribute('xlink:href', iconID);
     });
+}
 
+function updateTheme(theme) {
+    localUpdateTheme(theme);
     localStorage.setItem(themeLocalStorageKey, theme);
 }
 
@@ -145,7 +148,7 @@ function bringElementIntoView(element, updateHistory = true) {
     /**
      * tocbotInstance is defined in layout.tmpl
      * It is defined when we are initializing tocbot.
-     *  
+     *
      */
     // eslint-disable-next-line no-undef
     if (tocbotInstance) {
@@ -401,9 +404,9 @@ function getFontSize() {
     return currentFontSize;
 }
 
-function updateFontSize(fontSize) {
+function localUpdateFontSize(fontSize) {
     html.style.fontSize = fontSize + 'px';
-    localStorage.setItem(fontSizeLocalStorageKey, fontSize);
+
     var fontSizeText = document.querySelector(
         '#b77a68a492f343baabea06fad81f651e'
     );
@@ -413,6 +416,11 @@ function updateFontSize(fontSize) {
     }
 }
 
+function updateFontSize(fontSize) {
+    localUpdateFontSize(fontSize);
+    localStorage.setItem(fontSizeLocalStorageKey, fontSize);
+}
+
 (function () {
     var fontSize = getFontSize();
     var fontSizeInLocalStorage = localStorage.getItem(fontSizeLocalStorageKey);
@@ -653,3 +661,13 @@ window.addEventListener('hashchange', (event) => {
         bringIdToViewOnMount(url.hash);
     }
 });
+
+// eslint-disable-next-line no-undef
+window.addEventListener('storage', event => {
+    if (event.newValue === 'undefined') return;
+
+    if (event.key === themeLocalStorageKey)
+        localUpdateTheme(event.newValue);
+    if (event.key === fontSizeLocalStorageKey)
+        localUpdateFontSize(event.newValue);
+});