import React, { useState, useEffect } from 'react';
import { useMailSettings, useOrganization } from 'react-components';
import { getThemeIdentifier, getTheme, toStyle } 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 ThemeInjector = () => {
    const [{ Theme: userTheme = '' } = {}] = useMailSettings();
    const [{ Theme: orgTheme = '' } = {}] = useOrganization();
    const themeIdentifier = getThemeIdentifier(userTheme);
    const [style, setStyle] = useState('');

    useEffect(() => {
        if (themeIdentifier === DEFAULT_THEME.identifier) {
            return setStyle(orgTheme);
        }
        if (protonThemeIdentifiers.includes(themeIdentifier)) {
            return setStyle(toStyle([getTheme(themeIdentifier), orgTheme]));
        }
        setStyle(toStyle([userTheme, orgTheme]));
    }, [userTheme, orgTheme]);

    return <style>{style}</style>;
};

export default ThemeInjector;

@@ -160,16 +160,29 @@
  toStyle
+, isDarkTheme
  %7D from 
@@ -396,16 +396,55 @@
 fier);%0A%0A
+const DARK_MODE_CLASS = 'isDarkMode';%0A%0A
 const Th
@@ -1056,24 +1056,347 @@
 rgTheme%5D);%0A%0A
+    useEffect(() =%3E %7B%0A        if (isDarkTheme(userTheme)) %7B%0A            document.body.classList.add(DARK_MODE_CLASS);%0A        %7D else %7B%0A            document.body.classList.remove(DARK_MODE_CLASS);%0A        %7D%0A        return () =%3E %7B%0A            document.body.classList.remove(DARK_MODE_CLASS);%0A        %7D;%0A    %7D, %5BuserTheme%5D);%0A%0A
     return %3C

add dummy css class in the body for detecting the dark mode (#537)