From e3cc0f515f22377983edb50345c7762406b170ab Mon Sep 17 00:00:00 2001
From: econdepe <econdepe@protonmail.com>
Date: Thu, 23 Jan 2020 09:51:01 +0100
Subject: [PATCH] add dummy css class in the body for detecting the dark mode

---
 containers/themes/ThemeInjector.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/containers/themes/ThemeInjector.js b/containers/themes/ThemeInjector.js
index 5425b443e..ff1bb5d23 100644
--- a/containers/themes/ThemeInjector.js
+++ b/containers/themes/ThemeInjector.js
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useMailSettings, useOrganization } from 'react-components';
-import { getThemeIdentifier, getTheme, toStyle } from 'proton-shared/lib/themes/helpers';
+import { getThemeIdentifier, getTheme, toStyle, isDarkTheme } from 'proton-shared/lib/themes/helpers';
 import { PROTON_THEMES, DEFAULT_THEME } from 'proton-shared/lib/themes/themes';
 
 const protonThemeIdentifiers = Object.values(PROTON_THEMES).map(({ identifier }) => identifier);
 
+const DARK_MODE_CLASS = 'isDarkMode';
+
 const ThemeInjector = () => {
     const [{ Theme: userTheme = '' } = {}] = useMailSettings();
     const [{ Theme: orgTheme = '' } = {}] = useOrganization();
@@ -21,6 +23,17 @@ const ThemeInjector = () => {
         setStyle(toStyle([userTheme, orgTheme]));
     }, [userTheme, orgTheme]);
 
+    useEffect(() => {
+        if (isDarkTheme(userTheme)) {
+            document.body.classList.add(DARK_MODE_CLASS);
+        } else {
+            document.body.classList.remove(DARK_MODE_CLASS);
+        }
+        return () => {
+            document.body.classList.remove(DARK_MODE_CLASS);
+        };
+    }, [userTheme]);
+
     return <style>{style}</style>;
 };