fix: fix grayscale in firefox (#1261)

src/build/template.html

@@ -17,6 +17,17 @@
 
   <!-- inline CSS -->
 
+  <style id="theGrayscaleStyle" media="only x">
+    /* Firefox doesn't seem to like applying filter: grayscale() to
+     * the entire body, so we apply individually.
+     */
+    img, svg, video,
+    input[type="checkbox"], input[type="radio"],
+    .inline-emoji, .theme-preview, .emoji-mart-emoji, .emoji-mart-skin {
+      filter: grayscale(100%);
+    }
+  </style>
+
   <noscript>
     <style>
       .hidden-from-ssr {

src/inline-script/inline-script.js

@@ -37,7 +37,8 @@ if (theme !== INLINE_THEME) {
 }
 
 if (enableGrayscale) {
-  document.body.classList.add('grayscale')
+  document.getElementById('theGrayscaleStyle')
+    .setAttribute('media', 'all') // enables the style
 }
 
 if (!currentInstance) {

src/routes/_store/observers/grayscaleObservers.js

@@ -1,5 +1,7 @@
 import { switchToTheme } from '../../_utils/themeEngine'
 
+const style = process.browser && document.getElementById('theGrayscaleStyle')
+
 export function grayscaleObservers (store) {
   if (!process.browser) {
     return
@@ -8,7 +10,7 @@ export function grayscaleObservers (store) {
   store.observe('enableGrayscale', enableGrayscale => {
     const { instanceThemes, currentInstance } = store.get()
     const theme = instanceThemes && instanceThemes[currentInstance]
-    document.body.classList.toggle('grayscale', enableGrayscale)
+    style.setAttribute('media', enableGrayscale ? 'all' : 'only x') // disable or enable the style
     switchToTheme(theme, enableGrayscale)
   })
 }

src/scss/global.scss

@@ -31,11 +31,6 @@ body {
   background: var(--body-bg);
   -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
   overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
-
-  &.grayscale {
-    filter: grayscale(100%);
-  }
-
 }
 
 .main-content {