feat(dark-theme): fix breakage on mobile

e09949be9f introduced the dark theme globally, but
it only applies to web, so move the logic to App.web.js

react/features/app/components/AbstractApp.js

@@ -4,7 +4,6 @@ import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
 import Thunk from 'redux-thunk';
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import { i18next } from '../../base/i18n';
 import {
@@ -202,11 +201,7 @@ export class AbstractApp extends Component {
             return (
                 <I18nextProvider i18n = { i18next }>
                     <Provider store = { this._getStore() }>
-                        <AtlasKitThemeProvider mode = 'dark'>
-                            {
-                                this._createElement(component)
-                            }
-                        </AtlasKitThemeProvider>
+                        { this._createElement(component) }
                     </Provider>
                 </I18nextProvider>
             );

react/features/app/components/App.web.js

@@ -1,3 +1,6 @@
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
+import React from 'react';
+
 import { getLocationContextRoot } from '../../base/util';
 import '../../room-lock';
 
@@ -37,6 +40,20 @@ export class App extends AbstractApp {
         };
     }
 
+    /**
+     * Overrides the parent method to inject {@link AtlasKitThemeProvider} as
+     * the top most component.
+     *
+     * @override
+     */
+    _createElement(component, props) {
+        return (
+            <AtlasKitThemeProvider mode = 'dark'>
+                { super._createElement(component, props) }
+            </AtlasKitThemeProvider>
+        );
+    }
+
     /**
      * Gets a Location object from the window with information about the current
      * location of the document.