Dark Mode (#912)

closes #704

app/components/DropdownMenu/DropdownMenu.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import invariant from 'invariant';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
 import { PortalWithState } from 'react-portal';
+import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 
@@ -89,14 +89,13 @@ const Menu = styled.div`
   right: ${({ right }) => right}px;
   top: ${({ top }) => top}px;
   z-index: 1000;
-  border: ${props => props.theme.slateLight};
-  background: ${props => props.theme.white};
+
+  background: ${props => props.theme.menuBackground};
   border-radius: 2px;
   padding: 0.5em 0;
   min-width: 180px;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: ${props => props.theme.menuShadow};
 
   @media print {
     display: none;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -23,13 +23,13 @@ const MenuItem = styled.a`
   height: 32px;
 
   color: ${props =>
-    props.disabled ? props.theme.slate : props.theme.slateDark};
+    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
   justify-content: left;
   align-items: center;
   font-size: 15px;
   cursor: default;
 
-  svg {
+  svg:not(:last-child) {
     margin-right: 8px;
   }