Dark Mode (#912)

closes #704

app/scenes/Collection.js

@@ -4,7 +4,7 @@ import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { Redirect, Link, Switch, Route } from 'react-router-dom';
 
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import {
   CollectionIcon,
   PrivateCollectionIcon,
@@ -43,6 +43,7 @@ type Props = {
   documents: DocumentsStore,
   collections: CollectionsStore,
   match: Object,
+  theme: Object,
 };
 
 @observer
@@ -115,7 +116,7 @@ class CollectionScene extends React.Component<Props> {
   }
 
   render() {
-    const { documents } = this.props;
+    const { documents, theme } = this.props;
 
     if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
     if (!this.isFetching && !this.collection) return <Search notFound />;
@@ -139,7 +140,7 @@ class CollectionScene extends React.Component<Props> {
                 </HelpText>
                 <Wrapper>
                   <Link to={newDocumentUrl(collection)}>
-                    <Button icon={<NewDocumentIcon color="#FFF" />}>
+                    <Button icon={<NewDocumentIcon color={theme.buttonText} />}>
                       Create a document
                     </Button>
                   </Link>&nbsp;&nbsp;
@@ -184,6 +185,7 @@ class CollectionScene extends React.Component<Props> {
                     id={collection.id}
                     key={collection.description}
                     defaultValue={collection.description}
+                    theme={theme}
                     readOnly
                   />
                 )}
@@ -289,4 +291,6 @@ const Wrapper = styled(Flex)`
   margin: 10px 0;
 `;
 
-export default inject('collections', 'documents', 'ui')(CollectionScene);
+export default inject('collections', 'documents', 'ui')(
+  withTheme(CollectionScene)
+);

app/scenes/Document/components/Header.js

@@ -7,6 +7,7 @@ import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { NewDocumentIcon } from 'outline-icons';
+import { transparentize } from 'polished';
 import Document from 'models/Document';
 import AuthStore from 'stores/AuthStore';
 import { documentEditUrl } from 'utils/routeHelpers';
@@ -227,9 +228,9 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   z-index: 1;
-  background: rgba(255, 255, 255, 0.9);
+  background: ${props => transparentize(0.1, props.theme.background)};
   border-bottom: 1px solid
-    ${props => (props.isCompact ? props.theme.smoke : 'transparent')};
+    ${props => (props.isCompact ? props.theme.background : 'transparent')};
   padding: 12px;
   transition: all 100ms ease-out;
   transform: translate3d(0, 0, 0);

app/scenes/Search/components/SearchField.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import { lighten } from 'polished';
 import styled, { withTheme } from 'styled-components';
 import { SearchIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
@@ -26,8 +25,8 @@ class SearchField extends React.Component<Props> {
       <Field align="center">
         <StyledIcon
           type="Search"
-          size={48}
-          color={lighten(0.1, this.props.theme.slate)}
+          size={46}
+          color={this.props.theme.textTertiary}
           onClick={this.focusInput}
         />
         <StyledInput
@@ -56,24 +55,25 @@ const StyledInput = styled.input`
   font-weight: 400;
   outline: none;
   border: 0;
-  background: ${props => props.theme.smoke};
+  background: ${props => props.theme.sidebarBackground};
   border-radius: 4px;
 
+  color: ${props => props.theme.text};
+
   ::-webkit-search-cancel-button {
     -webkit-appearance: searchfield-cancel-button;
   }
-
   ::-webkit-input-placeholder {
-    color: ${props => props.theme.slate};
+    color: ${props => props.theme.placeholder};
   }
   :-moz-placeholder {
-    color: ${props => props.theme.slate};
+    color: ${props => props.theme.placeholder};
   }
   ::-moz-placeholder {
-    color: ${props => props.theme.slate};
+    color: ${props => props.theme.placeholder};
   }
   :-ms-input-placeholder {
-    color: ${props => props.theme.slate};
+    color: ${props => props.theme.placeholder};
   }
 `;
 

app/scenes/Settings/Profile.js

@@ -126,7 +126,7 @@ class Profile extends React.Component<Props> {
 }
 
 const DangerZone = styled.div`
-  background: #fff;
+  background: ${props => props.theme.background};
   position: absolute;
   bottom: 16px;
 `;

app/scenes/Settings/Shares.js

@@ -8,6 +8,7 @@ import AuthStore from 'stores/AuthStore';
 import ShareListItem from './components/ShareListItem';
 import List from 'components/List';
 import CenteredContent from 'components/CenteredContent';
+import Subheading from 'components/Subheading';
 import PageTitle from 'components/PageTitle';
 import HelpText from 'components/HelpText';
 
@@ -46,6 +47,7 @@ class Shares extends React.Component<Props> {
               sharing in <Link to="/settings/security">security settings</Link>.
             </HelpText>
           )}
+        <Subheading>Shared Documents</Subheading>
         <List>
           {shares.orderedData.map(share => (
             <ShareListItem key={share.id} share={share} />