Dark Mode (#912)

closes #704

app/components/InputRich.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import Input, { LabelText, Outline } from 'components/Input';
 
 type Props = {
@@ -15,11 +15,20 @@ type Props = {
 @observer
 class InputRich extends React.Component<Props> {
   @observable editorComponent: *;
+  @observable focused: boolean = false;
 
   componentDidMount() {
     this.loadEditor();
   }
 
+  handleBlur = () => {
+    this.focused = false;
+  };
+
+  handleFocus = () => {
+    this.focused = true;
+  };
+
   loadEditor = async () => {
     const EditorImport = await import('./Editor');
     this.editorComponent = EditorImport.default;
@@ -33,8 +42,16 @@ class InputRich extends React.Component<Props> {
       <React.Fragment>
         <LabelText>{label}</LabelText>
         {Editor ? (
-          <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
-            <Editor {...rest} />
+          <StyledOutline
+            maxHeight={maxHeight}
+            minHeight={minHeight}
+            focused={this.focused}
+          >
+            <Editor
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
+              {...rest}
+            />
           </StyledOutline>
         ) : (
           <Input
@@ -60,4 +77,4 @@ const StyledOutline = styled(Outline)`
   }
 `;
 
-export default InputRich;
+export default withTheme(InputRich);