fix: reduce flash-of-unstyled on grayscale (#2206)

nolanlawson · Nov 19, 2022 · 035ab9c · 035ab9c
1 parent ad73918
commit 035ab9c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 37 deletions.
diff --git a/src/inline-script/inline-script.js b/src/inline-script/inline-script.js
@@ -34,12 +34,13 @@ if (currentInstance) {
   document.head.appendChild(link)
 }
 
-if (theme !== INLINE_THEME) {
+if (theme !== INLINE_THEME || enableGrayscale) {
   // switch theme ASAP to minimize flash of default theme
   switchToTheme(theme, enableGrayscale)
 }
 
 if (enableGrayscale) {
+  // set the grayscale style on every img, svg, etc.
   document.getElementById('theGrayscaleStyle')
     .setAttribute('media', 'all') // enables the style
 }

diff --git a/src/routes/_store/observers/centerNavObservers.js b/src/routes/_store/observers/centerNavObservers.js
@@ -10,5 +10,5 @@ export function centerNavObservers () {
 
     // disables or enables the style
     centerNavStyle.setAttribute('media', centerNav ? 'all' : 'only x')
-  }, { init: false })
+  }, { init: false }) // init:false because the inline script takes care of it
 }
diff --git a/src/routes/_store/observers/customScrollbarObservers.js b/src/routes/_store/observers/customScrollbarObservers.js
@@ -10,5 +10,5 @@ export function customScrollbarObservers () {
 
     // disables or enables the style
     theScrollbarStyle.setAttribute('media', disableCustomScrollbars ? 'only x' : 'all')
-  }, { init: false })
+  }, { init: false }) // init:false because the inline script takes care of it
 }
diff --git a/src/routes/_store/observers/grayscaleObservers.js b/src/routes/_store/observers/grayscaleObservers.js
@@ -12,5 +12,5 @@ export function grayscaleObservers (store) {
     const theme = instanceThemes && instanceThemes[currentInstance]
     style.setAttribute('media', enableGrayscale ? 'all' : 'only x') // disable or enable the style
     switchToTheme(theme, enableGrayscale)
-  })
+  }, { init: false }) // init:false because the inline script takes care of it
 }