From 604471a15860dff1a4c6e855ca3aec32a9ea4082 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 1 Jun 2019 15:51:46 -0700
Subject: [PATCH] fix: fix grayscale in firefox (#1261)

---
 src/build/template.html                           | 11 +++++++++++
 src/inline-script/inline-script.js                |  3 ++-
 src/routes/_store/observers/grayscaleObservers.js |  4 +++-
 src/scss/global.scss                              |  5 -----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/build/template.html b/src/build/template.html
index f1ee4bc..e8e444d 100644
--- a/src/build/template.html
+++ b/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 {
diff --git a/src/inline-script/inline-script.js b/src/inline-script/inline-script.js
index 2621daf..bd75c53 100644
--- a/src/inline-script/inline-script.js
+++ b/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) {
diff --git a/src/routes/_store/observers/grayscaleObservers.js b/src/routes/_store/observers/grayscaleObservers.js
index 04d1977..69fe794 100644
--- a/src/routes/_store/observers/grayscaleObservers.js
+++ b/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)
   })
 }
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 3fa574c..7af0ff9 100644
--- a/src/scss/global.scss
+++ b/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 {